For those that are still looking for ways to access Chrome's Developer Tools: To access the developer tools, open a web page or web app in Google Chrome. Then take one of the following actions: Select the Wrench menu at the top-right of your browser window, then select Tools -> Developer tools. Nov 26, 2018 - To find the extension, go to chrome://extensions/ in Chrome's address bar to open up the Extensions. Right-click (click-and-hold on a Mac) the Refresh button, and select Empty Cache and Hard Reload. Click the F12 key. Before writing more complex code, let’s talk about debugging. All modern browsers and most other environments support “debugging” – a special UI in developer tools that makes finding and fixing errors much easier. We’ll be using Chrome here, because it’s probably the most feature-rich in this aspect. Your Chrome version may look a little bit different, but it still should be obvious what’s there. • Open the in Chrome. • Turn on developer tools with F12 (Mac: Cmd +Opt +I). • Select the sources pane. Here’s what you should see if you are doing it for the first time. Here we can see three zones: • The Resources zone lists HTML, JavaScript, CSS and other files, including images that are attached to the page. You have just exported Outlook for Mac 2016 to Windows Outlook PST. Automatically back export outlook for mac emails access. • Click on the right-arrow button to continue the process • Again, click on the right arrow button on the next screen • Outlook account prompts you to browse for a location where the file should be saved. • It may take some time to save, depending on the file size. Chrome extensions may appear here too. Google feed for mac. • The Source zone shows the source code. • The Information and control zone is for debugging, we’ll explore it soon. Now you could click the same toggler again to hide the resources list and give the code some space. If we press Esc, then a console opens below. We can type commands there and press Enter to execute. After a statement is executed, its result is shown below. For example, here 1+2 results in 3, and hello('debugger') returns nothing, so the result is undefined. ![]() A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution. While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. We can always find a list of breakpoints in the right pane. That’s useful when we have many breakpoints in various files. ![]() It allows us to: • Quickly jump to the breakpoint in the code (by clicking on it in the right pane). • Temporarily disable the breakpoint by unchecking it. • Remove the breakpoint by right-clicking and selecting Remove. Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: • Watch – shows current values for any expressions. You can click the plus + and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution. • Call Stack – shows the nested calls chain. At the current moment the debugger is inside hello() call, called by a script in index.html (no function there, so it’s called “anonymous”). If you click on a stack item, the debugger jumps to the corresponding code, and all its variables can be examined as well. • Scope – current variables. Local shows local function variables. You can also see their values highlighted right over the source. Global has global variables (out of any functions). There’s also this keyword there that we didn’t study yet, but we’ll do that soon. Now it’s time to trace the script. There are buttons for it at the top of the right pane. Let’s engage them. – continue the execution, hotkey F8. Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. Here’s what we can see after a click on it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |