Use the debug() function, passing your selected function’s name to debug() as an argument, like this: debug(myFunctionName). This can save time if you’re in a rush and don’t want to hunt down a specific function in your Sources panel, or when you don’t have the source files (for example, if you created the function in the console in the first place). If you’re interested in debugging a specific function, it’s possible to do so in the console itself. Set a Breakpoint at the Start of a Function Using the Console Use unmonitorEvents(document.body) to stop. You can also combine this with the last trick by first selecting an element using the element inspector, then typing monitorEvents($0). For example, to monitor all events that happen to the document body, you could use monitorEvents(document.body), or to monitor only clicks on the body, use monitorEvents(document.body, ‘click’) the console will log the event object, so you can see its properties. The monitorEvents() function takes an HTML ID, and can also take specific kinds of events. To monitor events on one node or element, you can use your console. Monitor Events on a Specific Element Using monitorEvents() in the Console You can also select the parent element using $1, and its parent using $2, etc.ĥ. Use the element inspector in the Elements tab to select the node, then click over to the Console tab and use the temporary element $0. If you want to select an element in your console tab, you can avoid getting messy with document.getElementByID. Access an Inspect Element in the Console Using the Temporary Variable $0 Finally, if you’d like to see the color in a different format, by switching between hex and RGBA, for example, you can do so by Shift-clicking on the color square.Ĥ. If you’d like to use a color from the page’s existing color palette, Chrome makes it easy just click on the arrows to the left of the color palette and use colors from the Page Colors palette. For a color attribute, it’s also possible to open a color picker by double-clicking on the colored square next to the attribute. You can toggle styles for your inspect element on or off using the checkboxes, or edit them by double-clicking on them. If you’ve selected an element that has a color attribute, that color will be visible in the bar on the right side of the elements tab. Open a Color Picker or Change the Color Format in the Elements Styles Tab Node removal will trigger when the selected element is removed.ģ.
Subtree modifications will trigger when a child of the selected element is removed or added, or when a child’s content is changed.Īttribute modifications will trigger when an attribute of the selected element is removed or added, or when its value is changed.
#Inspect element chrome extension code
Then right-click (or Command-click on a Mac) on the highlighted line of code and select “Break on…”. To create a DOM breakpoint, use the element inspector (the arrow icon in the top-left corner of the DevTools) to click on, or inspect, a part of the page. A DOM breakpoint lets you get to the source of the problem directly. This can be especially useful if an element is disappearing or appearing when you don’t expect it, and your code modifies multiple parts of the DOM, making it hard to see where exactly something is going wrong. But it’s also possible to create a breakpoint in reverse, by selecting the element rather than the line of code. If you’re debugging a page and suspect that a specific element is the cause, your first instinct may be to go to the Sources tab. Add Reverse Breakpoints in the Elements Tab
#Inspect element chrome extension full
There are also several other helpful shortcuts to know:įor a full list of shortcuts, see the official documentation. The fastest way, however, is through a keyboard shortcut: Control+ Shift+ I on a PC, and Command+ Option+ I on a Mac. A faster way is right-clicking anywhere on the page (or Command-clicking on a Mac) and then selecting “Inspect”, which will bring up the element you clicked on in the Elements tab in the DevTools. The first is opening the Chrome menu in the browser window, then clicking on “More Tools” and then “Developer Tools”. There are a few ways to access the DevTools. Open Chrome DevTools with Control+Shift+I, and Other Helpful Shortcuts Here are a few of the most useful tips and features I found to help you make the most of this powerful tool. While working on a recent project, I realized that I was in this position and spent some time digging into the Chrome DevTools. But with such a broad selection of features, it’s easy for developers to gravitate to familiar favorites and miss out on lesser-known tools that make debugging faster and easier. Google Chrome is a popular browser among frontend developers, and with its robust developer tools, it’s not hard to see why.
Want to become an expert at Google Chrome developer tools? Take a look at these useful features you may have missed.
0 kommentar(er)
