Suppose you have a simple application that consists of an index.html file and an index.js file, where index.html references index.js. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in WebStorm to start with your user data, see Starting a debugging session with your default Chrome user data for details.
In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on.īy default, a debugging session starts in a new window with a custom Chrome user data. To save the automatically generated configuration for further re-use, choose Save from the context menu after the debugging session is over. The file opens in the browser, and the Debug tool window appears. WebStorm generates a debug configuration and starts a debugging session through it. Open the HTML file that references the JavaScript to debug or select the HTML file in the Project tool window.įrom the context menu of the editor or the selection, choose Debug. Set the breakpoints in the JavaScript code, as required.
All the project files are served on the built-in server with the root URL with respect to the project structure.
This server is always running and does not require any manual configuration. WebStorm has a built-in web server that can be used to preview and debug your application. See Live Edit in HTML, CSS, and JavaScript for details.ĭebug an application that is running on the built-in server To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. You may have to select the Console tab.Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details.Ĭonfigure the built-in debugger as described in Configuring JavaScript debugger. The console will either open up within your existing Edge window, or in a new window. You can also press CTRL + Shift + i to open it. To open the developer console in Microsoft Edge, open the Edge Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. The Browser console will open in a new window. You can also use the shortcut Shift + ⌘ + J (on macOS) or Shift + CTRL + J (on Windows/Linux). To open the developer console in Firefox, click on the Firefox Menu in the upper-right-hand corner of the browser and select More Tools > Browser Console. The console will either open up within your existing Chrome window, or in a new window. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. It will automatically select the Console tab. The console will either open up within your existing Safari window, or in a new window. You can also use the shortcut Option + ⌘ + C.
Once that menu is enabled, you will find the developer console by clicking on Develop > Show Javascript Console. To do that, go into Safari's preferences ( Safari Menu > Preferences) and select the Advanced Tab. Before you can access the developer console in Safari, you first need to enable the Developer Menu.