

This opens up a browsing window where you can point the browser to where the respective files are on your computer. You can find this by going to the Sources tab and right clicking a folder or file.
Firefox script debugger code#
This can be really useful if you find yourself in a position where you’re using Notepad or some other primitive text-editing tool to view your code and prefer Chrome’s environment. It allows you to preserve any edit done in the browser onto your local files when debugging. This seems to be a feature only in Chrome. Microsoft gives more details about this on its website. The user with curly braces is IE’s icon of user-debugging code. The icon has a slash across it and looks like a user between two curly braces. You can either select a script file and click Ctrl+L, or you can click on the icon that shows up to the right of the file. In IE you will find this option in the Debugger tab after clicking on the left-hand folder icon to open the script browser. Mozilla Developer Network further explains this process. At this time, you will also not see any of the code in that library, unlike in Chrome. The symbol is an eye, and it will be crossed out and gray when enabled. In Firefox you will find this option in the Debugger tab, located in the bottom left-hand corner. Note: You will not see blackboxed scripts as part of your callstack.Ĭhrome Developer Tools explains this further. If you open a blackboxed script, a window on the page will notify you. To blackbox a script in Chrome, go to the Sources tab, find the applicable script file on the left-hand pane, and click “Blackbox script.” You want to blackbox all the scripts you or your team did not write since you won’t want to debug any libraries you use, especially if they’re minified. When you “blackbox” a script, you are in essence saying, “I don’t know what goes on in here, and I don’t want to know.” Your browser will not step into a blackboxed script, and it will not pause on exceptions inside that script either. (FYI, the screenshots and shortcuts will be for the Windows versions of browsers.) Let’s get started! 1. I use Chrome as my preferred debugging toolset although I have tried to obtain the equivalent features on Firefox and Internet Explorer (IE) 11 in this tutorial.

Firefox script debugger how to#
The more time you spend with the same tools, the more you will learn about them, instead of re-learning how to do everything over and over again. The best way to get better at debugging JavaScript with a browser is sticking to a specific browser.
