“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

The front end is beautiful

In this tutorial, we will learn a lot about debugging JS using the Chrome console, such as the various console apis for logging…

1. Try not to use alert debugging

alert("I will pop up in browser");
Copy the code

When we debug using alert, it annoyingly pops up in the browser and blocks the process. Try to avoid using Alert because there are many alternative debugging methods, as we’ll see later.

2. Use the browser as a debugger

Most modern browsers, such as Chrome, Firefox, Edge, Opera, and Safari, have built-in support for JavaScript debugging. Chrome is often the developer of choice as a debugger.

Chrome Developer Tools

Some of the most commonly used ICONS in Chrome DevTools are:

  1. useInspect the icon ⬉Select theThe elementAnd in theElementsTag to check its DOM position. You can also update or delete DOM elements, check the CSS of DOM elements, and much more.
  2. useEquipment icon ⍇Check the responsiveness of your site. It adds an additional toolbar to the browser page that simulates viewports for different devices, such as mobile phones(like iPhone, Samsung Galaxy, Nexus, LG, Nokia, blackberry, etc.)tablets(iPad, etc.)And a laptop.
  3. Can be found inSourcesTAB to view all the JavaScript source code for the rendered page. Often the source file is compressed, making it difficult to read or break points. useFormatting icon {}Format the compressed JS files in a human-readable format.

3. Code breakpoints

We can use breakpoints to pause the execution of JavaScript code in the browser. Set a line breakpoint in DevTools:

  1. Click the Source TAB.
  2. Open the js file and go to the line of code you want to debug.
  3. You can see a row of numbers on the left side of the code. Click the line number, and an icon appears next to it indicating that the breakpoint is set.
  4. If you want to delete a breakpoint, click the same line number again and the breakpoint icon disappears.

Note that the breakpoint icon in DevTool may vary depending on the Chrome version and operating system (Windows or MacOS)

Sometimes it can be inefficient to set line breakpoints, especially when we don’t know exactly where, or when debugging a large code base. Knowing and knowing how to use other types of breakpoints will make debugging more efficient.

Breakpoint types Use it when you want to pause…
Lines of code On the exact line of code.
Conditional lines of code On the exact line of code only if some condition is true
DOM On code that changes or deletes a particular DOM node or its children.
XHR The XHRsend()orfetch()methods
Event listener When triggering events (e.gclick) on the code that runs after.
abnormal On the line of code that threw the exception.
function When you call a function.

4. Use the ‘debugger’ statement to set a breakpoint

When the browser is in debug mode and the code runs into the debugger statement, it pauses code execution like a breakpoint. Usually, we will find problematic code in the browser devTools and set breakpoints to debug it, but sometimes it is not easy to find the exact code in the browser and the debugger statement can be very useful.

function hello(name) { let phrase = `Hello, ${name}! `; debugger; // <-- the code will pause say(phrase) at this line; }Copy the code

5. Conditional breakpoints

Sometimes we need to debug code under certain conditions, and we can use conditional breakpoints to debug code. To set a conditional breakpoint:

  1. Click the Source TAB.
  2. Open the file and go to the line of code you want to debug.
  3. Find the row number column to the left of the code. Right click on it.
  4. Select Add Conditional BreakPoint.. A dialog box appears below the line of code.
  5. Enter criteria in the dialog box.
  6. Press Enter to activate the breakpoint.

At this point, we can see that conditional breakpoints are identified differently from regular breakpoints, depending on the operating system and browser version.

6.Dom changes breakpoints

It is good to use the DOM to change breakpoints when we need to debug code for the change DOM node and its children. Steps to set a dom Chang breakpoint:

  1. Click the Elements TAB.
  2. Go to the element where you want to set the breakpoint.
  3. Right-click on the element.
  4. Hover over Break, and then select Subtree Modifications, Attribute modifications, or Node Removal.
DOM changes the type of breakpoints
  • Subtree Modifications: Triggered when a child of the currently selected node is removed or added, or the contents of the child node are changed. Does not fire when child node properties change or when the current node changes.
  • Attribute modifications: Triggered when properties are added or removed from the currently selected node, or when property values change.
  • Node removal: Triggered when the currently selected Node is removed.

7. XHR/Fetch the breakpoint

XHR breakpoints are useful for quickly finding AJAX source code if you encounter an error in an AJAX request and cannot identify the code that submitted the request. XHR breakpoints can be useful for quickly finding ajax source code when you encounter an Ajax request error and can’t find the code that triggered the request.

The XHR breakpoint suspends the execution of the code when the AJAX request URL contains the specified string. The AJAXsend() and fetch() methods support XHR breakpoints.

Steps to set an XHR breakpoint:

  1. Click the Source TAB.
  2. Expand the XHR breakpoints pane.

3. Click theAdd a breakpoint. 4. Enter a string to interrupt. DevTools pauses when this string appears anywhere in the XHR request URL. 5. Press theEnterConfirmation.

8. Event listener breakpoints

When we want to debug event listener code after an event is triggered, we can use event listener breakpoints. We can select specific events, such as click events under the mouse, and cut, copy, and paste events under the Clipboard category.

Steps to set event listener breakpoints:

  1. Click the Source TAB.
  2. anEvent Listener BreakpointsPane. DevTools displays a list of event categories, for exampleAnimation,Canvas,Clipboard,MouseAnd so on.

3. Select a category to include all events under the category, or expand the category and select a specific event.

9. Abnormal breakpoints

Chrome DevTools allows us to pause the execution of JavaScript code when caught or uncaught exceptions are thrown. This technique is useful when code fails without throwing an error and without prompting. Steps to set an exception breakpoint:

  1. Click the Source TAB.
  2. Click the Pause on Exceptions icon. Turns blue when enabled.

  1. If you want to Pause execution on caught exceptions as well, check/Pause on Uncaught exceptions.

10. The Function breakpoint

Use the debug(functionName) method to debug functions, where functionName is the name of the function to debug. When we need to debug a specific function, we can insert the debug() function in our code. Using debug() is the same as making a line breakpoint on the first line of the function.

function sum(a, b) { let result = a + b; // The code suspends return result on this line; } debug(sum); sum();Copy the code

Copy the above code to the DevTools console for execution and you will see the debugging effect.

conclusion

For reasons of time and space, the first part of JS debugging tips will be shared today, and the next part will be shared next time. Stay tuned.