#Simple css tutorial chrome extension code
#Simple css tutorial chrome extension plus

Its real device cloud comprises 2000+ real devices and browsers for comprehensive remote testing. Method 2: Using BrowserStack Live (for specific Chrome versions)īrowserStack is a cloud-based testing platform that empowers developers and testers to test their websites across popular operating systems and browsers. Now, let’s move on to the second method for inspecting web elements on desired versions of Chrome. Refer to the image below for a better understanding. That’s probably the fastest route to learn dev tools.One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option.Ĭlicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools. Oh, and also you can click at various places of dev tools and just see what’s showing up. The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. There are many more options in developer tools than covered here.

#Simple css tutorial chrome extension code

When paused, we can debug: examine variables and trace the code to see where the execution goes wrong.

An error (if dev tools are open and the button is “on”).

SummaryĪs we can see, there are three main ways to pause a script: If we have enough logging in our code, then we can see what’s going on from the records, without the debugger. To see it, either open the Console panel of developer tools or press Esc while in another panel: that opens the console at the bottom. Regular users don’t see that output, it is in the console. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what’s the context at that moment. Then we can analyze variables in the debugger to see what went wrong. When enabled, if the developer tools is open, an error during the script execution automatically pauses it. – enable/disable automatic pause in case of an error. That’s handy when we accidentally entered a nested call using, but it does not interest us, and we want to continue to its end as soon as possible. – “Step out”: continue the execution till the end of the current function, hotkey Shift +F11.Ĭontinue the execution and stop it at the very last line of the current function. The “Step into” goes into their code, waiting for them if necessary. If you’re only starting to learn JavaScript, then you can ignore the difference, as we don’t have asynchronous calls yet.įor the future, just note that “Step” command ignores async actions, such as setTimeout (scheduled function call), that execute later. That’s similar to “Step”, but behaves differently in case of asynchronous function calls. That’s good if we’re not interested to see what happens inside the function call. The execution is then paused immediately after that function call. If we compare them, the “Step” command goes into a nested function call and pauses the execution at its first line, while “Step over” executes the nested function call invisibly to us, skipping the function internals.

Similar to the previous “Step” command, but behaves differently if the next statement is a function call (not a built-in, like alert, but a function of our own). – “Step over”: run the next command, but don’t go into a function, hotkey F10. If we click it now, alert will be shown.Ĭlicking this again and again will step through all script statements one by one.

– “Step”: run the next command, hotkey F9. Take a look at the “Call Stack” at the right. The execution has resumed, reached another breakpoint inside say() and paused there. Here’s what we can see after a click on it: If there are no additional breakpoints, then the execution just continues and the debugger loses control. – “Resume”: continue the execution, hotkey F8. There are buttons for it at the top of the right panel. There’s also this keyword there that we didn’t study yet, but we’ll do that soon. Global has global variables (out of any functions).

You can also see their values highlighted right over the source. “anonymous”), the debugger jumps to the corresponding code, and all its variables can be examined as well. The debugger will show its value, automatically recalculating it in the process of execution.Ĭall Stack – shows the nested calls chain.Īt the current moment the debugger is inside hello() call, called by a script in index.html (no function there, so it’s called “anonymous”).

#Simple css tutorial chrome extension plus

You can click the plus + and input an expression. Watch – shows current values for any expressions. They allow you to examine the current code state: Please open the informational dropdowns to the right (labeled with arrows).