Special statement

This article is a series by Tomek Sułkowski published on Medium. According to the author revealed a total of 24 articles, updated until December 24, the copyright of the original author.

The author recommended our Chinese translation on Twitter, screenshot at the end

The translator had already communicated with the author before the translation to get permission to translate the whole series. In order not to disturb your reading, the record of authorization is here

The body of the

In the 24 days leading up to the holiday season, I will be publishing a series of short posts on how to make development tools more fun. Yesterday we delved into the style editor, and today I want to show you an interesting technique I call NINJia Console Logs, but first let’s talk about…

33. Conditional breakpointsConditional breakpoints

Sometimes breakpoints set are executed too many times: think of a loop of 200 elements, but you’re only interested in the result of the 110th loop, or some result that satisfies some other special condition.

In this case, you can set a conditional breakpoint. Implementation:

  • Right click the line number and select Add Conditional BreakPoint… (Add conditional breakpoint) option

  • Or right-click a breakpoint that has been set and select Edit BreakPoint

  • Then enter an expression that executes true or false (its value does not need to be explicitly true or false despite what the pop-up box says).

In this expression, you can get anything that this code can get, which is the scope of this line.

The breakpoint will now pause the code if the condition is met

34.The Ninja console.log

Thanks to conditional breakpoints, you can now start using this technique flexibly. Because:

  • Each condition must be judged – that is, run – every time the application executes to this line.
  • And if the condition returns zerofalsyThe value of (e.g.undefined), it does not pause..

So, instead of adding console.log, console.table, console.time, etc., to different parts of the Source, use condition judgments directly to “wire” them into the Source panel. They don’t stop, they’re always executed, and there’s a Breakpoints section that lists them when you don’t need them anymore. Remove them all with two clicks of the mouse and disappear like a bunch of ninjas!

This technique is also useful when debugging problems in production, where you can easily insert console logs into a source.

That’s all for today’s sharing

Routine: If you learn something new from this

→ Follow me on Twitter: Tomek Sułkowski

Other series

Other articles in this series will be translated soon, with links posted here.

  • Day 1: ‘$’ in the Console
  • Tips you might not know about Chrome debugging tools Day 2: Copying & Saving
  • Chrome debugging tools you didn’t know about
  • The Chrome debugging tool has a few tricks you don’t know about.
  • Day 5: Console log, puzzling case
  • You don’t know the Command menu for Chrome
  • 7. Fun tips you didn’t know about the Chrome Debugging Tool Consle
  • Chrome’s Color picker is a Color picker that you don’t know about.
  • Day 9: Time console
  • Custom Formatters are custom formatters for Chrome.
  • Today: Style Editors continued
  • Tips you don’t know about the Chrome Debug Tool Day 12: Ninja Log Print! (the ninja logs)
  • Chrome debugging Tool tips you didn’t know about
  • Chrome Debugging Tool tips you didn’t know About day 14: Other shortcuts
  • Chrome debugger tips you didn’t know about
  • Tips you don’t know about Chrome debugging Tools 16: Breakpoints
  • Day 17: Farewell to Console
  • What you Didn’t know about Chrome Debug Tools
  • Chrome debug tool tips you don’t know
  • Tips you didn’t know about Chrome debugging tools Day 20: The dark arts of Workspace
  • Tips you Don’t Know about Chrome Debugging Tools Day 21: Snippets
  • Chrome Debugging Tool tips you didn’t know
  • Chrome debug Tool tips you don’t know
  • Day 24: The last day, New Year’s Day, is awesome

Write in the last

If you are sure of my translation, you can also pay attention to my wave oh ~ incidentally my open source project, for a wave of star→ see here, beautiful blog system

The author recommended our Chinese translation on Twitter