Contact

Technology

Jan 05, 2016

6 Tips to Improve Your Browser Debugging Experience

Jose Gonzalez

Jose Gonzalez

Default image background

The best way to get better at debugging JavaScript with a browser is sticking to a specific browser. 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. 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. (FYI, the screenshots and shortcuts will be for the Windows versions of browsers.) Let’s get started!

1. Blackboxing

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. 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.

Chrome

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.”

Picture1

If you open a blackboxed script, a window on the page will notify you.

Picture2

Note: You will not see blackboxed scripts as part of your callstack.

Picture3

Chrome Developer Tools explains this further.

Firefox

In Firefox you will find this option in the Debugger tab, located in the bottom left-hand corner. The symbol is an eye, and it will be crossed out and gray when enabled. At this time, you will also not see any of the code in that library, unlike in Chrome.

Picture4

Mozilla Developer Network further explains this process.

Internet Explorer

In IE you will find this option in the Debugger tab after clicking on the left-hand folder icon to open the script browser. 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. The icon has a slash across it and looks like a user between two curly braces.  The user with curly braces is IE’s icon of user-debugging code.

Picture5

Microsoft gives more details about this on its website.

2. Workspaces

This seems to be a feature only in Chrome. It allows you to preserve any edit done in the browser onto your local files when debugging. 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. You can find this by going to the Sources tab and right clicking a folder or file. This opens up a browsing window where you can point the browser to where the respective files are on your computer.

Picture7

You can find more information on Chrome’s website.

3. Disable Cache

Chrome

This is an option I always keep on. In theory, it disables caching on your browser but only when DevTools are open, so you can still benefit from caching during normal browsing. In Chrome, it’s located under the Network tab, and it’s a checkbox that says “Disable Cache.”

Picture8

For the pesky times when your files are already cached (because you had DevTools closed), you can get some extra refresh options, but only while DevTools is still open! If you leave your mouse clicked on the refresh icon in Chrome, you can select “Empty Cache and Hard Reload.”

Picture9

Firefox

Unfortunately, I could not find a similar feature in Firefox (i.e., one that selectively allows you to disable caching). I know you can disable all caching in the options, but that ruins your browser for when you’re not debugging your website.

Internet Explorer

IE has selective disabling of cache as well, located in the Network tab, and it’s a button that looks like two CPU towers with a refresh symbol overlay. The label is, “Always refresh from server.”

Picture10

4. Console.Table

Unless you are just beginning your trek in web development, you have likely heard that using JavaScript alerts to help you identify the contents of your items is a bad idea. You should instead be using the console.log() command to less invasively keep track of objects and where your code is running or failing.

Logging objects works great, until you log a list of items. You now have to open up each item individually. Enter console.table(). This will allow you to preview a list of objects in a quicker fashion. However, it can get a bit hectic if your objects have a lot of properties.

Picture11

5. Pretty Print

Most of the time you won’t have to debug through minified code, but for those few times you have to jump into production and see what’s going on, minified code can be a killer. Pretty Print allows you to make debugging minified code less painful.

Chrome

In Chrome the option is called Pretty Print, and it’s a button that looks like two curly braces (located in the bottom left corner of a file you have open). In this case, we’re looking at a minified JavaScript file in the sources tab. Clicking on the button opens up a second tab of the same code, but formatted.

Picture12Picture13

Firefox

In Firefox the option is called, “Prettify Source,” and it shares the same curly braces icon. It can be found in the bottom right hand corner of the Debugger tab.

Picture14

Firefox also has the great option of automatically prettifying minified files. You can set this option by clicking on the settings gear on the right of the developer tools and selecting “Auto Prettify Minified Sources.”

Picture15

Internet Explorer

IE also has a similar icon, located in the Debugger tab. The label on the icon when you hover over it is “Turn on pretty print.” It can conveniently be turned on with the Ctrl+Shift+P shortcut.

Picture16

6. Further Reading: Know Your Shortcuts!

Once you choose which browser you want to use, learn the shortcuts on it that will make your experience better. Don’t just click around the UI to browse for a JavaScript file for which you might not know the location. Use the shortcut to open that file by name. I have added a few of the shortcuts I find myself using often:

Chrome

  • Find in file: Ctrl+F

  • Search in files: Ctrl+Shift+F

  • Open files: Ctrl+O or Ctrl+P

  • Search for functions: Ctrl+Shift+O or Ctrl+Shift+P

  • Go to line: Ctrl+G

Chrome’s website has even more shortcuts.

Firefox

  • Find in file: Ctrl+F

  • Search in files: Ctrl+Alt+F

  • Open files: Ctrl+P

  • Search for functions: Ctrl+D

  • Go to line: Ctrl+L

Firefox does an excellent job of revealing a lot of these shortcuts off the bat. Once you click Ctrl+P and your cursor heads over to the search bar, it immediately lets you know other convenient ways of searching.

Picture17

More shortcuts can be found on Mozilla Developer Network’s website. However, since this page is maintained by the community, it may not always be current. And even those who are updating the site may not catch the mistakes already within it. So take this website with a grain of salt.

Internet Explorer

  • Find in file: Ctrl+F

  • Search in files: Ctrl+F (just opens next file)

  • Open files: Ctrl+O

  • Search for functions: Unfortunately, IE does not seem to have this function

  • Go to line: Ctrl+G

More shortcuts can be found on Microsoft’s website.

And that’s all folks! I hope you learned at least one new thing today, and you leave this post a little bit more knowledgeable. Feel free to post your questions and comments below, or find us on Twitter at @CrederaMSFT.

Conversation Icon

Contact Us

Ready to achieve your vision? We're here to help.

We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

Searching for a new career?

View job openings