Search - Find - Edit 

Front-end SOURCE CODE WITH CHROME DEVTOOLS

cody lindley

Search - Find - Edit 

Front-end SOURCE CODE WITH CHROME DEVTOOLS

What is

?

The Chrome DevTools are a  SET of debugging tools built into Chrome. 

Use keyboard shortcuts to open DevTools:
Ctrl+ Shift+ I (Windows)
Cmd+ Opt+ I (Mac)

?

Why

SEARCH - FIND - Edit

Search:
 

  1. Searching the current HTML
  2. Searching within all sources
  3. Searching within a single source
  4. Searching source file names and paths
  5. Searching console input/output
  6. Searching file names and URL search values (i.e. ?foo=bar)
  7. Searching a .css file for specific selector
  8. Searching a .js file for specific function

 

Find (a DOM node) :
 

  1. Finding a DOM node visually
  2. Finding a DOM node using a selector

 

Edit:
 

  1. Edit HTML
  2. Edit an element’s attributes
  3. Edit CSS files
  4. Edit an element’s CSS & Inherited CSS
  5. Edit future running JavaScript

 

You want to perform a TEXT CHARACTER search on the current HTML page.

From the elements panel, use a keyboard shortcut (win: Ctrl + F, mac: Cmd + F) to open up the search input UI. Enter any character you’d like to be found on the current HTML page.

You want to perform a Character search across all of the source files used by the current HTML page.

From any panel use a keyboard shortcut (win: Ctrl + Shift + F, mac: Cmd + Opt + F) to open up the search panel. Enter any character you’d like to be found within the source files of the current HTML page. Note that clicking on one of the results (line number from source) will open the source in the source panel.

You want to perform a CHARACTER search on an individual source file.

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. Enter any character you’d like to be found in the current source file (Note: to un-minify the source click on the {} icon).

You want to perform a CHARACTER search across all of the source file names and paths.

From the source panel, use a keyboard shortcut (win: Ctrl + p, mac: Cmd + p) to bring up the open file UI. Enter any character you’d like to be found in a sources file name or path.

You want to perform a character search on the input and output from the console.

From the console panel, use a keyboard shortcut (win: Ctrl + F, mac: Cmd + F) to open up the search input UI. Enter any character you’d like to be found in the console.

You want to perform a character search on all file names and URL search values sent over the network.

From the network panel, use a keyboard shortcut (win: Ctrl + F, mac: Cmd + F) to open up the search input UI. Enter any character you’d like to be found in a network path/name.

You want to search a .css source file for a specific CSS selector.

From the source panel, select and open a .css source file, then use a keyboard shortcut (win: Ctrl + Shift + o, mac:Cmd + Shift + o) to open up a text filterable UI list of CSS selectors contained in the source file (Note: to un-minify the source click on the {} icon).

You want to search a .js source file for a specific JavaScript function.

From the source panel, select and open a .js source file, then use a keyboard shortcut (win: Ctrl + Shift + o, mac: Cmd + Shift + o) to open up a text filterable UI list of JavaScript functions contained within the source file (Note: to un-minify the source click on the {} icon).

You want to select a DOM node in the elements panel visually using the mouse pointer.

From the elements panel, click on the magnify icon. Then use the mouse to hover over elements on the page. Click the element you want to view and it will become selected in the elements panel for further investigation.

You want to locate a node element(s) in the DOM using a CSS selector.

From the elements panel, use a keyboard shortcut win: Ctrl + F, mac: Cmd + F to open up the search input UI. Enter a CSS selector into the search input UI.

From the console panel, use either the $('selector') or $$('selector') console commands to select element(s) from the DOM. $ uses the querySelector DOM method, which returns a single matching DOM element, while $$ uses querySelectorAll, which returns an array of all matching elements. However, if your site uses jQuery, $ will default to using jQuery rather than querySelector (see the documentation for more details).

or

You want to make a change to the current HTML page and view the changes on the fly.

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”. Make your edits, then click off the selected node for the changes to take effect. (Note: you can also drag and drop DOM nodes in the elements panel to change where the node is in the DOM tree. A node can also be removed by selecting the node hitting the delete key on the keyboard).

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.

From the elements panel, right click on a elements attribute and select, “Add Attribute” or “Edit Attribute”. Make your edits using the inline input box then hit enter.

You want to make a change to a .css file and view the changes on the fly.

From the source panel, select and open a .css source file and begin editing. Changes immediately take effect if the CSS is valid.

You want to make a change to the specified or inherited CSS of an element node and view the changes on the fly.

From the elements panel, select an element node. 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.

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.

The only JavaScript that you can update on the fly is JavaScript that will continue to run after the initial page load (i.e. a click handler callback function). From the source panel, select and open a .js source file and begin editing any JavaScript that can be invoked after the original page load. Save (win: Ctrl + S, mac: Cmd + S) after you edit.

Search/Find/Edit front-end source code with Chrome DevTools

By Telerik DevRel

Search/Find/Edit front-end source code with Chrome DevTools

For a long time, I fumbled my way through searching and finding routines involving frontend source code, using the Chrome Developer Tools (aka DevTools). When I finally managed to find what I was looking for, I would then stumble through the best way to make a quick change and track that change. I eventually realized my problem was that I never took the time to learn the DevTools fundamentals. I will relate the fundamentals of searching frontend source code, finding DOM elements, and editing everything, all in the browser, using the Elements and Sources DevTools panels, so that you don’t suffer like I did.

  • 2,679
Loading comments...

More from Telerik DevRel