![]() It parses your JavaScript, analyzes it, removes dead code, and rewrites and minimizes what’s left. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. ![]() Google Closure Compiler is a tool for making JavaScript download and run faster. It is 100% safe and yields a higher compression ratio than most other tools. The YUI Compressor is also able to compress CSS files. Bonus Tool (To Discover the Best Minification Tool for You)ĭeveloped by Yahoo!, YUI Compressor is a command-line tool written in Java that allows you to minify your JavaScript files.When paused on a line of code containing a function that isn't relevant to the problem you are debugging, click the Step over ( ) button to run the function without stepping into it. To learn how to pause at a breakpoint, see Set a breakpoint, to pause code, above. Step through codeĪfter your code is paused at a breakpoint, step through the code, one line at a time, investigating control flow and property values along the way. To save time when debugging, learn how and when to use the other types of breakpoints. Line-of-code breakpoints can sometimes be inefficient to set, especially if you don't know exactly where to look, or if your codebase is large. Or, right-click the line number and then select Add breakpoint.Ī red circle then appears next to the line number, indicating a breakpoint: If you're using the demo page, select get-started.js.Ĭlick the area to the left of the line number for the line of code. In the Navigator pane, select the file that contains the line of code you want to debug. DevTools always pauses at the specified line of code, before running it. Use a line-of-code breakpoint when you know the exact region of code that you need to investigate. The most basic and well-known type of breakpoint is a line-of-code breakpoint. To pause your code in the middle of the runtime, set a breakpoint. To make a minified file human-readable, click the Format ( ) button at the bottom of the Editor pane. Reformat a minified JavaScript file with pretty-print To make the change permanent, you need to make the change in your source code and then re-upload the file to the server. The change you made in DevTools is useful to quickly test a bug fix, but is temporary. For example, click the Add Number 1 and Number 2 button on the demo page. ![]() DevTools then loads the JavaScript file into the JavaScript engine of Microsoft Edge, and the changes take effect immediately. Press Ctrl+S (Windows, Linux) or Command+S (macOS) to save. For example, add alert("The add button was clicked") in the onClick function of the demo page. If you're using the demo page, select get-started.js. In the Navigator pane, select the file you want to change, to open it in the Editor pane. If that tab isn't visible, click the More tools ( ) button. In DevTools, on the Activity Bar, select the Sources tab. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). To open DevTools, right-click the webpage, and then select Inspect. You can use the Get Started Debugging JavaScript demo page. Open the webpage you want to debug in a new window or tab. You don't need to make the changes in an external editor or IDE, re-upload the file to the server, and then refresh the page instead, to test changes, you can edit your JavaScript code directly in DevTools and see the result immediately. When fixing a bug, you often want to try out some changes to your JavaScript code. Pause your code with breakpoints - setting various types of breakpoints.Get started debugging JavaScript - tutorial walkthrough.This article covers how to use the debugger features in Microsoft Edge DevTools, including how to set a line-of-code breakpoint.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |