What a Tool!

Issue #182  (debugger statement, Git/GitHub, Text Editors, Databases)

As you might already know, your browser's developer tools can be used to debug JavaScript by utilizing breakpoints. Breakpoints allow you to pause script execution as well as step into, out of, and over function calls. Breakpoints are added in your developer tools by means of line numbers where you indicate where you want script execution to be paused.

This is fine until you start changing your code. Now a defined breakpoint may no longer be in the place you want it to be. Take the following code as an example:

function doSomething() {
  console.log('first log...');
  console.log('last log...');


If I open this code in my browser's developer tools debugger, I can place a breakpoint before one of the lines inside the doSomething() function. Let's say I want to pause script execution before the "last log..." message. This would require that I place the breakpoint on that line. In this case, it would be line 3 of my code.

But what if I add the breakpoint, then I add another line of code before that line?
function doSomething() {
  console.log('first log...');
  console.log('second log...');
  console.log('last log...');


If I refresh the page, the breakpoint will still be there but now the script will pause execution on the "second log..." message instead of the "last log..." message. Again, this is because the breakpoints are based on line numbers. The debugger is still stopping on line 3, but that's not what we want.

Enter JavaScript's debugger statement.

Instead of setting breakpoints directly in the developer tools, I can use the debugger statement to tell the developer tools where to pause execution:
function doSomething() {
  console.log('first log...');
  console.log('last log...');


Now I can add as much code as I want prior to the debugger statement and the script will still pause in the right place, without any concerns over changing line numbers.

If you've been writing JavaScript for a while, I'm sure this tip is nothing new to you. But those new to debugging will certainly benefit from using this feature, which is part of the official ECMAScript spec. As expected, inserting a debugger statement will have no effect on your code if a debugger is not present (e.g. if the developer tools are not open).

Now on to this week's tools!
Did you like this issue's coding tip? Get more tips like this...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips

Git, GitHub & Command Line Tools

Use GitNotify to track open source projects. Get daily code diffs from public GitHub or your GitLab repositories. Get notified via Email & Slack.

A beautiful GitHub Issues experience for macOS. Browse, organize and manage your GitHub Issues. Gitscout provides a beautiful new experience to stay organized and get your work done.

GitHub Code Folding
Chrome extension for GitHub that enables code folding – the ability to selectively hide and display sections of a code.

Automated code review for GitHub. Automated static analysis for C#, Java, CSS, JavaScript, Ruby and Go source code.

A lightweight and flexible command-line JSON processor.

Unix in your browser tab.

A macOS client for your GitHub issues. Easily sort between issues and pull requests you've been mentioned in, assigned, or subscribed to.

Encrypted Gist
Client-side encrypted plaintext editor that can persist/sync with GitHub Gists. All text is synchronized in an encrypted state. 

Transforms JSON into discrete assignments to make it easier to grep for what you want and see the absolute 'path' to it.
Hire With Confidence
Let Toptal help you navigate your hiring process by connecting you with elite, senior-level developers. Get started today.

(ads by LaunchBit) 

Text Editors, Code Playgrounds, etc.

Web Maker
Replace your new tabs with an offline web experiment playground.

Interactive JavaScript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.

Online JavaScript editor for front-end experiments.

Visual Studio for Mac
A mobile-first, cloud-first IDE. Made for the Mac.

The fastest and most efficient way to do Google searches from inside Sublime Text. Requires a Sublime plugin and a Chrome extension.

GrapesJS Newsletter Demo
A newsletter starting template using the GrapesJS drag-and-drop page builder.

Reduce email development time by hours. Create bulletproof emails with minimal coding.

debugger client for Sublime Text based on Xdebug, the PHP debugger and profiler.

Databases, Content, etc.

Now at version 6.x. An open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

Make iOS and Android apps with just a single JSON, loaded over HTTP.

Tagged JSON is a tagging scheme/microformat for enriching the types that can be stored in JSON documents.

A full-featured markdown parser and compiler, written in JavaScript. Built for speed.

Enterprise spreadsheets for .NET and JavaScript. The tool of choice for every business application.

JavaScript wrapper library for Google Drive API v3. It authenticates, saves, loads and lists documents from your Google Drive.

A lightweight query and transformation language for JSON data. Inspired by the 'location path' semantics of XPath 3.1, it allows sophisticated queries to be expressed in a compact and intuitive notation.

A Tweet for Thought

The best people write tweets like this.

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Sarah Drasner's Useful Pens for Everyday Front End Development is well worth bookmarking.

Thanks to all for subscribing and reading!

Keep tooling,