Context
Source Code
I am using VueJS with webpack in a project.
I am not using the vue-loader plugin or .vue files.
My project is structured like a standard Javascript webpack project which imports vue.
My webpack configuration has the following relevant options:
dev-tool: "source-map"
resolve.alias["vue$"] = "vue/dist/vue.js"
Source maps for my webpack Javascript bundle file are being generated.
Issue
While programming an error showed up in the console. Unfortunately the stack trace shows the error as being in the vue.js file and later the webpack generated Javascript bundle file (main.js).
It looks like the source map generated for my Javascript bundle by webpack is not working properly.
I found several related issues, however these issues seem to be related to the vue-loader webpack plugin which I do not use.
Looking at the application source in Firefox I can confirm that source maps are not functioning correctly:
The same behavior occurs in Chrome.
What could be causing source maps to not work correctly?
Note: The error shown in the screenshots is not the focus, I was able to figure it out. The main focus of the question is that source maps are not working correctly. Making it harder to debug issues when they do appear.
If you're debugging in Chrome and sourcemaps are not working you have a few alternative options. This may not be as helpful as getting sourcemaps working, but your question has gone unanswered for a year and a half, so perhaps this will be useful.
One of my favorites is to use the "Pause on Exceptions" toggle in the Sources tab. In the picture above it's the octogon with a pause icon. Click on that and refresh your page. When the error occurs your application will pause with the error in a full stack trace, like so:
That Call Stack is clickable. You can move backward through calling functions until you see something identifiable from your own source. If source maps are not loading properly I'd recommend looking for string literals. Those won't be minified in the output and can point you back to where the error is being triggered.
Also, you may want to consider using a Vue plugin like Vue.js DevTools. I find this sort of data-centric view of the application quite helpful. You can watch state and mutations and even replay or modify actions happening in your app to pinpoint errors.
Related
I have found the settings in Visual Studio Code to enable type checking for JavaScript in JS files. Such that: Bad code is highlighted and it also shows the reason why it's bad code
This behavior does not occur for JavaScript code in Vue files. I have searched through all the settings in Visual Studio Code. I have scoured the internet for any extension that can do this for me to no avail.
How can I make my Vue files type-check the JavaScript in them?
LOL. I found the answer.
All I had to do was add //#ts-check directly underneath the script tag and type checking was enabled.
So HAPPY!!!
Thank you, everyone, for your input
For best results I'd suggest starting a new project using vue-cli and selecting the options for TypeScript and ESLint. You'll also need the ESLint extension for VS Code.
Here's a helpful blog post showing the parts of this process.
Once you have a nicely working setup with the clean project, then move the code over. I suggest this because getting all the config right can be a mess with an existing project.
So I want to play with the source code of a page. In this particular example it seems like the webpage is an Angular app (that i dont own) with source maps to *.ts files. The main code seems to all be in a bundle.js.
I want to be able to add console.log() statements to this code and learn more about how this webpage works.
I have tried editing the .ts sources (this doesn't work although I expected that).
I try editing the bundle.js but its so big that it causes my dev tools to crash.
Does anyone know of a VS Code plugin (or something similar) that would let me open the sources locally on my machine, edit them and see the changes reflected on the website.
If not what is the best path forward for being able to edit the local js of this page.
Firefox allows you to add log statements into the code when you're using the Debugger/Sources tab. Just right click the line you care about and then choose Add log. I believe Chrome allows something similar.
While I admit this is a pretty obscure problem, I'm posting this partly in case it is driving others crazy (too), partly because it might have wider ramifications, and partly because it may be an issue with my project settings.
In NB-8.1 I have several angular modules for handling a configuration-editing app. Since last week I have been trying to figure out why the navigator pane doesn't populate with these files. When I click on the source, the Navigator pane doesn't update. If the pane is newly opened, it shows <No view available>. If it is correctly showing another file, it remains showing the old file and effectively ignores the new file.
After experimenting, I found that it is specific to any js file with a filename prefix of "config" - which in this case was all the files for this particular app (config-service.js, config-ctrl.js, etc). Renaming the files with a new prefix (eg, "konfig-ctrl.js" or "x-config-ctrl.js") solved the issue.
Is this widespread, or a problem only with this project? If the latter, what should I look for? Help or advice appreciated.
This looks like a bug to me. AFAIK NetBeans is handling JS files with the config in name as possible Karma configurations and maybe it (although I can't remember if Karma has to be enabled or where exactly does it look for these candidate files...) I'd suggest to report a bug against NetBeans https://netbeans.org/bugzilla/enter_bug.cgi?product=web (component HTML Project)
I get a very similiar problem. Any js file with "conf" in the name (anywhere in the name) cannot be Run as javascript from Netbeans. Right-click on the file and Run is deactivated. Once I change the name to something else, it works.
Figured I would see what React Native is all about, so I followed the instructions here and can't even get the out of the box project to run correctly. Chrome dev tools throws all sorts of errors. Here is the stack trace shown in the simulator, anybody else run into this?
It seems like what may have happened here is that you named your project "React". The CLI replaces the word "SampleApp" with the name that you specified in the sample files that it generates.
This is the original file here: https://github.com/facebook/react-native/blob/master/Examples/SampleApp/index.ios.js You can see where it has "SampleApp" in a few places where on your file has "React" for all of them.
It really wasn't your fault, the CLI just needs to be a little smarter and not allow someone to create a project named "React". :)
I got the same error when I used different version of JSXTransformer.js and react.js . Using 0.13.3 from cdn solved the problem. https://cdnjs.com/libraries/react/
I am currently trying to get an instance of the WebGL context in HaxeJS using FlashDevelop. I would like to use the stdjs library.
I have imported the dependencies using haxelib with:
haxelib git xirsys_stdjs https://github.com/xirsys/stdjs.git haxelib
I tested its availability with:
haxelib list
I then added it to the library section in FlashDevelop - see pic
**I have included the the library in the classpaths (I really don't know if I should, but without it, compile won't even take place) - See pic **
I've then taken the WebGL specific code from the following github repo:
https://github.com/mikecann/WebGLTerrainicles/blob/master/src/Main.hx
When I try to compile the project, it opens up my browser as expected, however, in the console there is an issue as there are missing libraries:
Obviously I'm missing something here (perhaps in the import process?) - I've looked but can't find much information on getting WebGL working for Haxe with the stdjs externs etc using FlashDevelop and any help would be great.
Looks like there is a problem with xirsys_stdjs lib.
The reference project you link to is using only one file called Html5Dom.hx (originally from Jeash project) to define the HTML5/webgl API. You don't need xirsys_stdjs if you reuse this file.
While you're at it, mikecann's project seems to include a lot of basic classes to get started writing webgl in haxe.