Skip to main content

Debugging JavaScript in Chrome

Code Quality: Debugging in Chrome

Explain what debugging is in JavaScript development?​

View Answer:
Interview Response: Debugging is finding and fixing errors within a script.

Technical Response: Debugging is finding and fixing errors within a script. Modern browsers and most other environments support debugging tools – a unique UI in developer tools makes debugging much more manageable. It also allows us to trace the code step by step to see what is going on.

How do you turn on/open developer tools in Chrome?​

View Answer:
Interview Response: You can turn on/open your chrome developer tools by pressing F12 or for Mac: (Cmd+Opt+I).

How do you open the left sidebar to access the vertical tabs?​

View Answer:
Interview Response: You can use the toggler button to open the vertical tabs under the source tab.

What are the three panes accessible via the Chrome Dev Tools source tab?​

View Answer:
Interview Response: The file navigator, code editor, and the JavaScript debugging pane.

Where can you find the file navigator pane and open it in the chrome developer tools?​

View Answer:
Interview Response: The file navigator pane opens by clicking on the sources tab at the top of the developer tools. Once you click on the tab, you can click on the toggler button and view the file navigator pane.

Where is the JavaScript debugging pane located in the chrome developer tools?​

View Answer:
Interview Response: You can find the JavaScript debugging pane on the right-hand side of the code editor, beneath the sources tab.

How can you toggle to enter and escape the console tab window?​

View Answer:
Interview Response: You can toggle the console tab-pane by using the ESC button.

What are some examples of things you can do with the developer console?​

View Answer:
Interview Response: The most notable things that you can do with the Chrome developer console include selecting DOM elements, converting your Browser into an editor, finding events associated with an element in the DOM, monitoring events, finding the time of execution of a block of code, arrange the values of a variable into a table, inspect an element in the DOM, list the properties of an element, retrieve the value of your last result, and clear the console and the memory.

What is a breakpoint in JavaScript debugging?​

View Answer:
Interview Response: A breakpoint is a line of code that causes the debugger to interrupt JavaScript execution. We may investigate current variables and run commands on the terminal while the program gets halted. To put it another way, we can debug it.

How do you explicitly implement the debugger in most code editors?​

View Answer:
Interview Response: We can pause the code using the (debugger;) command.

Code Example:

// explicit debugger implementation
function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger; // <-- the debugger stops here

  say(phrase);
}

How do you reload the source page after setting your breakpoints in the Chrome developer console?​

View Answer:
Interview Response: In Windows, you can press F5 to reload the page; you must use Cmd+R on a MAC.

What does the watcher do in the chrome development tools?​

View Answer:
Interview Response: The watcher displays the variable's current value as it gets added to an expression. If the variable does not get set or if you cannot find it, the value shows as <Not Available>.

How do you make a minified file readable in Chrome development tools?​

View Answer:
Interview Response: You can click on the format {} icon to make the minified files readable in DevTools.

What does the Call Stack do in Chrome developer tools?​

View Answer:
Interview Response: The Call Stack shows the nested call chain in Chrome, Edge, and Safari.

Is the console part of the DOM or the BOM?​

View Answer:
Interview Response: The console is part of the window object supplied by the Browser.