Debug tool window
When you start a debugger session, WebStorm opens the Debug tool window where you can perform various debugger actions and analyze the program data (frames, threads, variables, and so on).
For general instructions on using tool Windows, refer to Tool Windows.
By default, the Debug tool window only appears when your program hits a breakpoint and stays after the debug session is terminated. To change this behavior, open the Settings dialog ( CtrlAltS ), go to Build, Execution, Deployment | Debugger. and select the Hide Debug window on process termination checkbox.
Sessions
The available debug sessions are shown in separate tabs in the top part of the Debug tool window. When you close a tab, the corresponding session terminates.
All the information like inline variable values and execution point is shown for the selected session tab. This is important if you are running several debug sessions in parallel that use the same code.
Tabs
For each session, the Debug tool window shows the following tabs and panes:
- Frames: use this pane to navigate in call stacks and switch between threads when debugging a multiprocess Node.js application or Service Workers.
- Variables: the pane lists the variables available in the current context and lets you analyze and modify the program state.
- Watches: the pane lets you manage watches. By default, watches are shown on the Variables tab for more efficient use of the screen space. If you have a lot of watches, consider viewing them in a separate tab.
- Console : displays stacktraces. For client-side applications, the tab also shows everything that was logged in your code (for example, using console. ) and behaves also as a read-eval-print loop ( REPL ) so you can run JavaScript code snippets in it and interact with the page that you are currently debugging. Learn more from Interactive debugger console
- Process Console : WebStorm opens this tab when you are debugging a Node.js application. The tab shows the output of the node process itself, that is, everything that is written to process.stdout and process.stderr directly or is logged using console Learn more from Using interactive Debugger Console.
- Debugger console: WebStorm opens this tab when you are debugging a Node.js application. Here you can run JavaScript code snippets and view the console. messages. Learn more from Using interactive Debugger Console.
- Scripts : during a JavaScript debugging session, the tab shows all the external resources that are automatically downloaded during the JavaScript code execution. Use this tab to monitor downloading the external resources. To open the code of a resource in the editor, double-click the item in question.
- Elements : this tab shows the actual HTML source code and the HTML DOM structure of the active browser page. Use the tab to monitor the changes made to the page through the browser. The tab is available only when you are debugging client-side code.
Move tabs
You can arrange the tabs to fit your preference. You can move a tab to another location or group a tab with another tab, so that they share the same space on the screen.
Restore default layout
If you changed the layout of the Debug tool window and don’t like the new arrangement, you can revert it to the default state.
- Click in the top-right corner of the Debug tool window, then click Restore Default Layout.
Debug tool window
When you start a debugger session, the Debug tool window appears. Use this window to control the debugger session, display and analyze the program data (frames, threads, variables, and so on), and perform various debugger actions.
This is a brief overview of the Debug tool window. For general instructions on using tool Windows, refer to Tool Windows.
By default, the Debug tool window opens when your program hits a breakpoint and is not hidden when the session is terminated. To change this behavior, clear the Show debug window on breakpoint checkbox on the Build, Execution, Deployment | Debugger page of the IDE settings CtrlAltS.
Sessions
The available debug sessions are separated into tabs in the top part of the Debug tool window.
If you enable Services window for specific run/debug configurations, the entire view of the Debug window will be displayed inside the Services window when you debug any of these configurations.
All the information like inline variable values and execution point is shown for the selected session tab. This is important if you are running several debug sessions in parallel that use the same classes.
Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
When you close a tab, the corresponding session terminates.
Tabs
Debug tool window shows the following tabs for each session:
- Frames: lets you navigate in call stacks of the threads.
- Variables: lists the variables available in the current context and lets you analyze and modify the program state.
- Watches: lets you manage watches. By default, watches are shown on the Variables tab for more efficient use of the screen space. If you have a lot of watches, consider viewing them in a separate tab.
- Console: displays the program output. For local sessions, the tab works the same as when you just run the program without the debugger attached. The only difference is that debugger output (for example, log messages from breakpoints) is added to the console. When you attach to a process, the program output is not redirected and only the debugger output is shown in the debugger console.
- Threads: displays the list of live threads and lets you switch between them. From this tab, you can export threads information in text format.
- Memory: provides the information on the currently available objects on the heap and lets you monitor and analyze their lifetime.
- Overhead: lets you monitor the resources consumed by particular debugger features and optimize the debugger performance.
Show/hide tabs
- Click and select which tabs you want to see.
How to use Watch window to debug C#. Debugging in Unity 3/3
Restore default layout
If you changed the layout of the Debug tool window and don’t like the new arrangement, you can revert it to the default state.
- Click in the top-right corner of the Debug tool window, then click Restore Default Layout.
Move tabs
You can arrange the tabs to fit your preference. You can move a tab to another location or group a tab with another tab, so that they share the same space on the screen.
- Drag the tab header to the desired location. The blue frame indicates the destination.
How to Download and Install Debugging Tools for Windows just by using Commands
I just received this random question from a colleague of mine and thought to myself “Huh, thats a pretty good question”. Who doesn’t want a bit of automation anyway?
but suprisingly it appears that this topic is not explainded by Microsoft much in detail, so I decided to quickly share some information on this one.
Step 1: Downloading the “Windows SDK” that contains Debugging Tools for Windows by PowerShell command.
This is just a technique to download a file from a given URL using the “Invoke-WebRequest” PowerShell command.
Invoke-WebRequest https://go.microsoft.com/fwlink/?linkid=2173743.OutFile
If I wanted to download the Windows SDK under C:\Tools, the command will look like this.
Step 2: Install “Only” the Debbugging Tools for Windows and nothing else.
If you just want the good stuff such as the debuggers (windbg, kd, cdb, ntsd) and some tools to help you with debugging (gflags, umdh, adplus, etc.), run the following commnad (Don’t forget to change directory to the download path from Step1 before you run the command).
winsdksetup.exe /features OptionId.WindowsDesktopDebugger /quiet
Then. Done! You will have everything you need under the delfault install directory at “C:\Program Files (x86)\Windows Kits\10\Debuggers” if you are running on x64 computer.
Additional Notes (in other words, the actual important stuff that no one talks about)
But wait, what if I want to change the install directory or select other features?
No Problem. You can find everything you need by running the following command which will show you a dialog of all the available options.
Here’s a quick peek about all options you can specify.
Also, you can find out the list of features you can specify during installation with the following command.
If you don’t understand what the above feature corresponds with the “Real” feature name, the feature list order aligns with the one from the GUI installer.
Hope this helps, have a good one.
The best JavaScript debugging tools for 2021 and beyond
If you work with JavaScript, you’ll know that it doesn’t always play nice. Thankfully, due to the plethora of JavaScript debugging tools available, troubleshooting is usually straightforward. This blog post outlines the best tools to help you find, diagnose, and fix problems. Depending on your use-case, some tools might be better than others, but all will save you time in the debugging process.
Developer tools in modern web browsers
Every modern browser has tools available within it to debug code. Let’s take a look at some of the basic methods you might use to debug JavaScript using these browser tools, and then highlight each major browser and its dev tools in turn.
Outputting JavaScript debugging messages to the browserOne of the easiest ways to debug JavaScript has always been to output data to the browser. Here are the three main ways to do so:
Popping up messages with `alert`A tried and true method to debug JavaScript items, `alert` will create a popup alert when your code meets a particular condition. The problem with alerts is that you end up with a series of popups. If you need more than one, they become unwieldy rather fast. This makes them more useful for a quick check of a value or to find out if a certain bit of code is executing, but not much more.
Logging lines to console with `console.log`Logging to the console is the norm for JavaScript debugging. Adding a `console.log(‘foo’);` line to your code will create a `foo` log entry in the JavaScript console of your respective dev tools set. This can be useful for a variety of reasons. For example, you can verify the value of a variable after you pass it to a method, or output the contents of an API response or results of a database query.
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
The Chrome Developer Tools are a quick way to debug your JavaScript code. You can open the Dev Tools to the Console tab by using the following shortcuts:macOS `CMD“OPT“I`Windows `CTRL“SHIFT“I`
The Chrome Developer Tools are some of the best in the industry, and many developers trust these tools for their day-to-day debugging needs. Chrome Developer Tools include the standard JavaScript console, as well as tools for network and performance monitoring and security features. The majority of JavaScript debugging takes place in the Console and the Network activity tabs.
React developer tools for Chrome
If you work with React as well as with JavaScript, there is an extension available called React Developer Tools. This tool set adds a React tab to your dev tools window. The React tools allow you to inspect the contents of components. You can also view and edit their properties and state. The tools provide insight on the component which created the selected component, as well. If you use Chrome as your main development browser, and develop in React, it is well worth picking up this extension to make your React debugging easier.
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.
To find the Firefox Developer Tools, take a look in the Tools menu under Web Developer. There, you will find the JavaScript console, and many other useful items.
Safari Develop Menu
Users of Safari have to enable the Safari Develop Menu to gain access to Safari’s built in developer tools.
Once you have followed the above steps, a Develop menu will appear in the toolbar. In the Develop menu, there are options to show the JavaScript Console, a debugger, a network traffic monitor, and an inspector for page elements. The Safari Dev Tools are comparable to the JavaScript debugging tools offered by Chrome. You can see the trend of improvement amongst the developer tools from all browsers, as they grow more capable of meeting the needs of developers.
Opera Chromium dev tools
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.
Edge Developer Tools
Microsoft Edge is a modern browser that broke away from many of the preconceived negative views of Internet Explorer. As a result, Microsoft Edge includes an excellent dev tools package, which can be accessed via the same shortcut keys as the other options. These tools include a JavaScript console, as well as Network, Performance, and Memory tabs. information about Edge dev tools can be found in the Microsoft Edge Developer Tools Guide.
The hackable debug tool — debugger
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!
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
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.
Postman for debugging requests and responses
A non-trivial amount of JavaScript development revolves around sending requests to APIs and receiving responses. These requests and responses are often in JSON format. Your application may need to conduct API requests for innumerable reasons, such as interacting with authentication servers, fetching calendars or news feeds, checking the weather, and countless others.
Postman is one of the best JavaScript debugging tools for troubleshooting the requests and responses in your application. Postman offers software for Windows, macOS, and Linux. With Postman, you can tweak requests, analyze responses, debug problems. Within the software, you can tailor clean transactions that you can then duplicate in your application.
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.
ESLint
ESLint is a linter for JavaScript. Linters will analyze code as it is written and identify a variety of basic syntax problems. The use of ESLint will allow you to catch errors, particularly easy to resolve but annoying ones such as missing brackets or typos, before executing the code. ESLint is available as a Node package. It has also been set up as a plugin for many code editors such as Sublime Text 3 and VS Code, which will then mark the offending errors right in your editor window.
JS Bin
JS Bin is one of the best JavaScript debugging tools for collaborative debugging of your JavaScript. It allows you to test and debug scripts right along with other people. You can run the JavaScript, see a debug console and the output of the scripts, add libraries and dependencies, and so much more. Pro accounts can also take their code private, as well as other benefits.One of the primary reasons you might consider using a tool like JS Bin is simplicity. In JS Bin, you can test the functionality of a small subset of your JavaScript in an isolated environment, without having to set an entire environment for it. When testing in JS Bin, you can be sure that your results aren’t tainted by conflicting scripts or styles from other parts of your application.Another key feature of JS Bin is the immediate result you get from altering your JavaScript, HTML, or CSS. You can see your changes in real time. You can copy some code to JS Bin and have a working (or not working!) demo in no time. Then you are ready to debug it or share it.
JSON Formatter and Validator
Webpack
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
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.
Raygun Error Monitoring
Tired of spending time digging through logs to find your JavaScript errors? Raygun Crash Reporting is the answer, and has everything you need to find and assess the impact of JavaScript bugs and performance problems. It’s quick and easy to set up:
Sign up for a free trial of Raygun2. Insert the following snippet somewhere in your application’s “ to fetch Raygun’s script asynchronously.
!function(a,b,c,d,e,f,g,h),f=b.createElement(c),g=b.getElementsByTagName(c)[0], f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g) hh(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push( e:g)(window,document,”script”,”//cdn.raygun.io/raygun4js/raygun.min.js”,”rg4js”);
Paste the following lines just before your body tag (replacing the API key with yours, which you can get from your Raygun dashboard:
rg4js(‘apiKey’, ‘paste_your_api_key_here’); rg4js(‘enableCrashReporting’, true);
At this point, Raygun will begin collecting data and notifying you of issues.
JavaScript debugging can be a challenge, and having the right tools available to you can make or break the debugging process. Every application and use case will be different, but learning about new tools will help you find out what your best options might be. Once you’ve familiarized yourself with debugging tools, you can brush up on your JavaScript debugging skills with our JavaScript debugging tips guide.
JavaScript debugging is easier when you know where the error is! Raygun helps developers detect, diagnose, and resolve issues with greater speed and accuracy. Take a 14 day free trial today.
