I'm very new to debugging JavaScript, let alone Typescript, let alone a Stencil project that uses tsx files (which I assume are a certain type of reactive Typescript files).
I hoped that by adding a debugger statement into the code, using a refresh in Chrome the Debugging tools would show up. But nothing happens. If I add a console.log at the same place, it behaves as expected. But nothing happens with a debugger statement.
What to do? I don't want to debug with tons of console.log everywhere. 😏
I'm using VSCode by the way. Don't know whether that is relevant. I read in https://github.com/microsoft/vscode-js-debug that JavaScript debugging should be built into VSCode. I don't care whether I debug inside VSCode or inside Chrome - as long as I am able to debug somehow.
Here is the repository, if somebody wants to give it a try or checkout configuration files: https://github.com/NothingAG/adg-components
Thanks a lot.
Instead of adding debugger statements in code you can always add breakpoints in Chrome Developer Tools.
Load your app in the browser
Open Developer Tools in Chrome (for example right-click on a page and choose "Inspect")
In Developer Tools choose tab "Sources"
Open the file you want to debug by hitting command-P. An input field appears where you can enter the name of the file you want to debug
Add a breakpoint by clicking on the line number in the gutter
Next time your app hits the breakpoint the debugger shows up.
Apparently the build tool (nx) runs a production build which is why debugger statements are automatically filtered out.
To fix it you can explicitly instruct Stencil to run a development build:
npm start -- --dev
Related
I have a JavaScript file which i want to debug and test, so i want to add some breakpoints to it. now i read that i can do so using Firefox F12 tool. so i did the following steps:-
i navigate to my application.
click on F12.
then under "Debugger" tab i can see all the script which are loaded with the ability to add breakpoints to it.
But I can not find a way to write a custom JavaScript and add breakpoints to it.. is this possible ? or the JavaScript need to be already loaded inside the page to debug it ?
Thanks
Just open your console, and use debugger as one of your statements and the debugger will stop there;
(function(){
var x = 1;
debugger;
console.log(x);
})()
One relevant point:
"You can place a debugger; statement anywhere in your JavaScript code. Once the JS interpreter reaches that line, it will stop the script execution, allowing you to inspect variables and step through your code."
Running a script in your computer
Normally you would have to run an local apache server to do this.
The other option is run the script with node.js. You have plenty of debug options.
Here you got a excelent tutorial about debugging on Node (called Bug Clinic):
https://nodeschool.io/#workshoppers
I have the debugger running and It seems to work on first load as it hits breakpoints. However, as the user takes actions, the breakpoints are no longer hit.
I have this (notice how the line numbers are different. I'm guessing the minified/concat files of my actual JS doesn't match the files I'm debugging but I don't know how to change them)
but the console shows it on a different line for my log statement:
However, every time I try to debug, I miss the break point even though WebStorm sees the console messages in the debug console tool.
How can I debug code that is minified?
I did find the way to make this work in the end and it had to do with my sourcemaps for webpack. Because I was building a different directory, I had to point it to my build dir rather than my actual code for the webpack///./
http://puu.sh/pzyhA/ef2af3a74e.png
What have I done?
I'm running a ASP.net / Polymer website in VS2010 Development server.
It all used to run fine I could set a breakpoint in some JavaScript, run the site in Debug mode and it would break at the set location.
I obviously changed something though because now I can only set a breakpoint once the Javascript is loaded or by putting a debugger; statement in the code
Actually, I can set a breakpoint (or appear to) but it doesn't break at that location
Just me being stupid again
It turns out the problem was because I had added the folder containing the Javascript source to the workspace (by right clicking in the Sources pane)
Having done this the folder tree which used to appear under the localhost:nnnnn parent in the Sources pane no longer showed
Don't remember adding them but obviously I did
Removing the folders fixed it
I mainly put this answer here so that the next time I do the same thing and look it up on Stack Exchange I will find the answer
I have found the best way to add a breakpoint with Chrome is just adding this in the code:
debugger;
So long as the code is actually run and you have the javascript console open it will be caught.
But sometimes the I have found the dev tools get broken and require the entire browser to be restarted.
I'm very new to JavaScript, jQuery, and JSON browser debugging. But I do know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser so I can set and manage my breakpoints and effectively debug my code.
However, when i press Ctrl + Shift + I to open chrome dev tools, i can't see a list of my javascript files under the Sources tab.
I only something in the form of...
jslib.axd?=jquery-.7.2.min.js,query.validate.min.js,MyRegion.js,MyCountry.js,MyCategory.js
...which looks like a concatenated list of all my javascript files. But what i was expecting to see is a list of each of my javascript files.
Screenshot:
It looks like you have used a compression tool to combine all of your javascript files. What you see is not an error in Chrome - it's just all of your script files combined into one.
If you are still developing, just turn off whatever tool you are using to compress them (at least until you are finished your dev work). This will allow your scripts to load individually on the page.
Then you can use chrome dev tools to see each file listed.
If you want to set a break point. Use 'debugger' in your code like so :
//code here
debugger;
I never use Chrome to debug javascript but i'm sure you can do it easilly. Firebug in firefox is great and you can also debug in Visual studio if you use IE with 'debugger'.
Hope this help.
If you use chrome/firefox just press f12 it will open web development tool
now go to source/script section and select the js file in which you want to add a break point
just click on that line to add break point not run the function it will come to your break point and then you can debug through F10 for singe line and move for next break point press F8
I have a .js file that normally gets executed by cscript.exe (i.e. is not run in the browser and cannot be run there).
I know, that I can feed cscript.exe the //X parameter in order to get asked for a debugger to choose. Ok. That's fine.
I select "Visual Studio 2005 Debugger", IDE comes up, execution stops on the first line. Fine.
Script terminates (or I terminate it), I edit something and want to debug it again.
Simple thought would be just to hit F5 and run the debugger again. But this doesn't work. VS just tells me that it couldn't find any debugging symbols in cscript.exe:
What now? Starting cscript.exe from the command line again for each debug run is quite cumbersome in my opinion.
Is there a way to simply debug the script with VS? Also hints for other debugging tools would be appreciated.
Edit:
The answer of t0nyh0 is pretty close. I create a dummy console application, compile and the debugger comes up. However, two things are not perfect
cscript.exe always asks for the debugger to use (which instance of VS).
Could this be overcome by specifying a certain debugger instance directly in the command line?
In order to fire a post-build event, there have to be some modifications in the sources. Currently, I simply add/delete a blank line to trigger building of my dummy project.
Is there a way to always execute the post-build script, even if nothing has changed?
There might not be a way to attach the debugger to cscript.exe itself, but you may be able to create a post-build event that runs a batch file that executes the cscript.exe //x myScript.js command so that every time you build, it executes for you automatically.
See this for more information on post-build events: http://msdn.microsoft.com/en-us/library/ke5z92ks(v=vs.80).aspx
While not a debugger tool, you should consider using a JavaScript testing framework for Visual Studio, such as Chutzpah, which will most likely make your life a lot easier.
Along with standard browser debugging tools (Firebug or Chrome Inspector), I've found that's all I usually need to build clean, tested, mostly-bug-free JavaScript code.
I don't have cscript at hand, but I think you can try to attach VS to the process manually.
After you start up your js using cscript.exe //x myScript.js, click "Debug - Attach to Process", find your cscript.exe process and attach to it.
I forget if VS2005 has this function but VS2008 and VS2010 do.
It is the native debug action that VS takes to debug (attach to the running process). If this doesn't work, I don't think you can do this using Visual Studio.
Best Javascript Debugger is Rhino Debugger See http://www.mozilla.org/rhino/debugger.html .
it is open source and you can get the source code of the Debugger GUI.
you can customise it as you wish :-) .