Hello, this is Yoshino from Development! Last time we talked aboutAbout debugging JavaScript in Google Chrome browser"article and showed you how to do some basic debugging when you place a breakpoint.
In this article."Conditional Code Line BreakpointsThe following is an introduction to the settings about
Click here for table of contents
- 1. what is a conditional code line?
- 2. insert a conditional code line breakpoint
- 3. summary
What is a conditional code line?
A conditional line of code is, as the word implies, a line of code with a condition added to it. A condition is set at a breakpoint, and if the condition is true, the process is paused.
Insert a conditional code line breakpoint
Rather than explaining it in words, let's actually insert a conditional code line breakpoint and run it.
Click here for the procedure.
STEP1. Open Chrome DevTools
For Windows, click here → F12 or Shift + Ctrl + I
For Mac, click here → Cmd + Opt + I
STEP2. Click the "Sources" tab when Chrome DevTools opens.
STEP3. Left-click the row number column.
STEP4.The blue icon is displayed in the row number column that you clicked, and right-click.
STEP5. Left-click "Edit breakpoint...".
STEP6.Set the condition when you want to pause the process (This time, set it to pause when x is 100 or more)
Here is the operation screen
▼ Let's debug the breakpoint we just inserted by executing resume.
The process proceeded without being paused by the orange icon. This is because I inserted a breakpoint to stop the process if the condition setting is "x is 100 or more".
Next, let's insert a breakpoint to stop the process "if x is less than 100".
Since x = 30, the condition "if x is less than or equal to 100" is met, so the process was paused this time.
You can set various conditions to conditional code line breakpoints. They are very useful when you want to stop processing under specific conditions, so please try to use them!
summary
In this article, I explained how to insert a conditional code line breakpoint. The condition can be a string as well as a number, so try it out! Thank you for your patience with this article.
English 
Japanese