In fact, these routines might be the most common way in which you engage Devtools, and, knowing them will certainly make you a more efficient developer, if not an all around better front-end developer.Īlso, did you know that Telerik offers a Kendo UI inspector plugin for Chrome DevTools? This makes searching, finding, and editing Kendo UI widgets and tools much easier.
![inspect element chrome extension inspect element chrome extension](https://3fxtqy18kygf3on3bu39kh93-wpengine.netdna-ssl.com/wp-content/uploads/2020/04/Screenshot-2020-04-23-at-4.53.50-PM-700x415.png)
Save (win: Ctrl+s, mac: Cmd+s) after you edit.īy learning these 16 routines you will have a robust understanding of the basic use cases for the Chrome Devtools. js source file and begin editing any JavaScript that can be invoked after the original page load. From the source panel, select and open a.
INSPECT ELEMENT CHROME EXTENSION UPDATE
Routine: The only JavaScript that you can update on the fly is JavaScript that will continue to run after the initial page load (i.e. You want to make a change to post-page load JavaScript and have the change take effect in the page immediately for future running JavaScript. To the right of the elements panel is a "styles" panel which can be used to add and edit all of the CSS that is applied and inherited by the selected element node. Routine: From the elements panel, select an element node. You want to make a change to the specified or inherited CSS of an element node and view the changes on the fly. Changes immediately take effect if the CSS is valid.ġ4. Routine 1: From the source panel, select and open a. css file and view the changes on the fly. Make your edits using the inline input box then hit enter. If you right click on an actual attribute in the DOM you can select, "Edit Attribute" to edit a specific. Routine 1: From the elements panel, right click on a element node and select, "Add Attribute". You want to make a change to a specific attribute on an element node in the HTML page and view the changes on the fly. A node can also be removed by selecting the node hitting the delete key on the keyboard). (Note: you can also drag and drop DOM nodes in the elements panel to change where the node is in the DOM tree. Make your edits, then click off the selected node for the changes to take effect. Routine 1: From the elements panel, right click on an element node or text node (which will include all child nodes as well) and select, "Edit as HTML". You want to make a change to the current HTML page and view the changes on the fly. However, if your site uses jQuery, $ will default to using jQuery rather than querySelector (see the documentation for more details). $ uses the querySelector DOM method, which returns a single matching DOM element, while $$ uses querySelectorAll, which returns an array of all matching elements. Routine 2: From the console panel, use either the $('selector') or $$('selector') console commands to select element(s) from the DOM. Enter a CSS selector into the search input UI. Routine 1: From the elements panel, use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI. You want to locate a node element(s) in the DOM using a CSS selector. Click the element you want to view and it will become selected in the elements panel for further investigation. Then use the mouse to hover over elements on the page. Routine: From the elements panel, click on the magnify icon. You want to select a DOM node in the elements panel visually using the mouse pointer. Enter any text you'd like to be found in the current source file (Note: to un-minify the source click on the icon). Routine: From the source panel, select and open a source file, then use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI. You want to perform a text string search on an individual source file. Note that clicking on one of the results (line number from source) will open the source in the source panel. Enter any text you'd like to be found within the current HTML page. Routine: From any panel use a keyboard shortcut (win: Ctrl+Shift+f, mac: Cmd+Opt+f) to open up the search panel. You want to perform a text string search across all of the text contained within all of the source files used by the current HTML page. Enter any text you'd like to be found on the current HTML page. Routine: From the elements panel, use a keyboard shortcut (win: Ctrl+f, mac: Cmd+f) to open up the search input UI. You want to perform a text string search on the current HTML page. Below, you will find 16 short videos detailing solutions to the most common search-find-edit routines using Chrome DevTools.
![inspect element chrome extension inspect element chrome extension](https://i.stack.imgur.com/CuQl7.jpg)
In this article, I'm going to help myself, and hopefully you the reader, gain a robust understanding of finding things and doing things using Chrome DevTools. The problem is that I haven't taken the time to learn the fundamentals well enough to remember the basic routines of search-find-edit in-between DevTools uses. I consistently fumble my way through the searching, finding, and editing UI options in the Chrome Developer Tools (aka Chrome DevTools).