Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
Depending on your use-case, some tools might be better than others, but all will save you time in the debugging process.
1. Developer Tools in Modern Web Browsers
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.
Chrome Developer Tools
React Developer Tools for Chrome
Firefox Developer Tools
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.
Safari Develop Menu
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 the menu bar.
Edge Developer Tools
2. Node.js Inspector for Debugging Requests to Node Apps
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.
How to Create a Debug Configuration for Node.js
- 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.
- Interacting with authentication servers.
- Fetching calendars or news feeds.
- Just checking the weather.
- … and many others.
Additionally, Postman has a feature entitled “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.
4. JS Bin
5. JSON Formatter and Validator
It can be incredibly difficult to spot syntax errors or keys which have obviously incorrect values when looking at unformatted JSON. If you have a condensed or “minified” JSON object, missing line returns and spaces, it may be a challenge to read. You need to be able to quickly scan that object and check for errors in formatting or content.
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.
Every application and use case will be different, but learning about new tools will help you find out what your best options might be.
Originally published at raygun.com.
Published at DZone with permission of Freyja Spaven , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.