![]() ![]() You can see the console output of your program in the Debug window in IntelliJ IDEA. Start the debugging session by running the JavaScript debug configuration you've created previously: Learn more about setting up JavaScript debug configurations. Specify the configuration Name and provide the URL on which the project runs ( by default). IntelliJ IDEA Ultimate provides a powerful set of tools for debugging code during development.įor debugging Kotlin/JS in IntelliJ IDEA, you'll need a JavaScript Debug configuration. This also makes it possible to debug Kotlin's main() method which is executed when the script is loaded for the first time. As with regular JavaScript code, any set breakpoints will persist across page reloads. The developer tools even support setting breakpoints within a statement. Set a breakpoint by clicking on one of the line numbers. Navigating to the Kotlin file shows you the regular Kotlin code (as opposed to minified JavaScript): ![]() Alternatively, you can manually switch to the Sources tab and find the file you need in the file tree. Depending on your browser, these logs can reference the Kotlin source files and lines they come from:Ĭlick the file reference on the right to navigate to the corresponding line of code. If your program is logging information to the console, navigate to the Console tab to see this output. Learn how to find the developer tools in popular browsers. Navigate to the page in the browser and launch its developer tools (for example, by right-clicking and selecting the Inspect action). ![]() Run the project by calling one of the available run Gradle tasks, for example, browserDevelopmentRun or jsBrowserDevelopmentRun in a multiplatform project. Refer to your browser's documentation for more details. Most modern browsers provide tools that allow inspecting the page content and debugging the code that executes on it. The Kotlin Multiplatform Gradle plugin automatically generates source maps for the project builds, making them available without any additional configuration. This way, the source maps enable support for debugging the code during its execution. If your DevTools window is wide, this pane is displayed to the right of the Editor pane.Ī common method for debugging this type of problem is to insert several console.log() statements into the code and then to inspect values as the script runs.JavaScript source maps provide mappings between the minified code produced by bundlers or minifiers and the actual source code a developer works with. This pane provides tools for inspecting the JavaScript for the webpage. After you select a file in the Navigator pane, this pane displays the contents of the file. The Editor pane (in the upper right corner). ![]() Every file that the webpage requests is listed here. The Navigator pane (in the upper left corner). Select the Page tab, and then select the JavaScript file, get-started.js. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). To open DevTools, right-click the webpage, and then select Inspect. The Sources tool is where you debug JavaScript. These tasks include changing CSS, profiling page-load performance, and monitoring network requests. Step 2: Get familiar with the Sources tool UIĭevTools provides several tools for different tasks. Next, go to Step 2: Get familiar with the Sources tool UI to start fixing the addition error that's the bug. The label below the button says 5 + 1 = 51. For more information, see Browse InPrivate in Microsoft EdgeĬlick Add Number 1 and Number 2. Tip: Open Microsoft Edge in InPrivate Mode, to ensure that Microsoft Edge runs in a clean state. Alternatively you can press and hold Ctrl (for Windows, Linux) or Command (for macOS), and then click the link. To open the webpage, right-click the link and select "Open link in new tab" or "Open link in new Window" on the popup window. Open the demo webpage Get Started Debugging JavaScript in a new window or tab. The first step in debugging is to find a sequence of actions that consistently reproduce a bug. This article teaches you the basic workflow for debugging any JavaScript issue using DevTools. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |