Enter your details to view and download the full PDF version
Popping up messages with `alert()`
Logging lines to console with `console.log()`
Pausing code execution with the `debugger`
The `debugger;` statement will pause code execution wherever you insert it in the code. The `debugger` statement will function as a breakpoint, pausing code execution. This allows you to investigate with the dev tools while the code is in a paused state.
Firefox users in the past have relied on Firebug, an extension which gave Firefox users a set of competitive developer tools. The Firefox Developer Tools included in the latest versions of Firefox absorbed the functionality of Firebug. This brings the Firefox browser and its built-in tool suite on par with Google Chrome.
Users of Safari have to enable the Safari Develop Menu to gain access to Safari’s built in developer tools.
- Go to the Safari tab and choose Preferences
- Choose Advanced
- Enable the option titled Show Develop menu in menu bar
Previously, Opera’s built in developer tools suite was called Dragonfly. At one point it was a standalone project, then became a baked-in part of Opera, and included the standard dev tools items. It was particularly useful at remotely debugging another instance of Opera. After Opera 12, Opera began shipping with Chromium Dev Tools instead, which are opened and operated similarly to the standard Chrome Dev Tools described above.
The Firefox dev tools team maintains a standalone tool dubbed simply “debugger” that you can use to debug in either Firefox or Chrome, and you can switch between them as necessary to ensure that your application is functioning correctly in both. If you are willing to set this node app up with just a few simple steps, you can use it in lieu of using the in-browser tools in either browser, and get the same exact experience and identical comparison in both. Pretty neat!
Debugging the Node.js on your application’s backend can be challenging. The following tools take advantage of the capabilities of the Node.js Inspector to assist you:
The Node Debug library for Node Inspector is a library can be included in your projects to assist you in implementing Node Inspector.
Node.js V8 Inspector Manager is a Chrome extension which adds Node Inspector tools to the Dev Tools in Chrome
The Visual Studio Code editor allows for easy built-in Node Inspector usage
- Click the Debug tab at the top
- Choose Open Configurations
- If none are set already, choose Node.js to start with
- If you already have settings in the launch.json, you can hit Add Configuration to add the Node.js configuration
For more information on the various parameters and configurations that VS Code can use when debugging Node.js, check out the Node.js debugging documentation.
Additionally, Postman has a feature called Collections. Collections allow you to save sets of requests and responses for your application or for an API. You save valuable time when collaborating with others or repeating the same testing tasks. When using Postman collections, you update the collection if necessary and then use it. This is much faster than repeatedly writing out every test.
Webpack is a bundling tool used by developers for all manner of sites and applications. If you use Webpack to do your bundling, you have the advantage of the stats data available from the tool.
This data can range from module contents, build logs and errors, relationships that exist between modules, and much more. If you already use Webpack, this is an incredibly useful feature that sometimes gets overlooked. You can even use pre-built tools, such as the Webpack Analyse Web App, to visualize the stats that you generate from Webpack.
SessionStack is a monitoring software that provides you with a set of monitoring tools. These tools collect client-side data and assist you in figuring out exactly what your clients are doing on your website. In situations where problems occur, being able to track precisely what happened and how is vital.
This is where SessionStack shines. SessionStack uses a video replay to help developers replicate user issues and error conditions.
Tip: If you use both SessionStack and Raygun, you can attach SessionStack video replays to Raygun reports.
1. Sign up for a free trial of Raygun
2. Insert the following snippet somewhere in your application’s `<head>` to fetch Raygun’s script asynchronously.</head>
3. Paste the following lines just before your body tag (replacing the API key with yours, which you can get from your Raygun dashboard:
4. At this point, Raygun will begin collecting data and notifying you of issues.