Table Of Contents<\/h3>\n\n- 1. Elements<\/a><\/dt>\n
- \n
\n- 1.1 Inspect and Tweak Your Pages<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 1.2 Edit Styles<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 1.3 Edit the DOM<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 2. Console<\/a><\/dt>\n
- \n
\n- 2.1 Using the Console<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 2.2 Iteract from Command Line<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 3. Sources<\/a><\/dt>\n
- \n
\n- 3.1 Debugging with Breakpoints<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 3.2 Set Up Persistence with DevTools Workspaces<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 4. Network<\/a><\/dt>\n
- \n
\n- 4.1 Network Panel Basics<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 4.2 Network Throttling<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 5. Timeline<\/a><\/dt>\n
- \n
\n- 5.1 How to look at performance<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 5.2 Analyze Runtime Performance<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 6. Profiles<\/a><\/dt>\n<\/dl>\n
\n- 7. Resources<\/a><\/dt>\n
- \n
\n- 7.1 Manage Data<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 8. Device Mode<\/a><\/dt>\n
- \n
\n- 8.1 Device Mode<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 8.2 Emulate Mobile Viewports<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 9. Conclusion<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Elements<\/h2>\nUse the Elements panel to iterate on the layout and design of your site by freely manipulating the DOM and CSS.<\/p>\n
<\/a>1.1 Inspect and Tweak Your Pages<\/h3>\n1.1.1 Live Edit a DOM Node<\/h4>\n
To live-edit a DOM node, simply double-click a selected element and make changes:<\/p>\n![\"Live-edit](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/dev-tools-1.gif\")
<\/a>Live-edit a DOM node<\/figcaption><\/figure>\nThe DOM tree view shows the current state of the tree; it may not match the HTML that was originally loaded for different reasons. For example, you can modify the DOM tree using JavaScript; the browser engine can try to correct invalid author markup and produce an unexpected DOM.<\/p>\n
1.1.2 Live Edit a Style<\/h4>\n
Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).<\/p>\n
To edit a name or value, click on it, make your changes, and press Tab<\/code> or Enter<\/code> to save the change.<\/p>\n![\"Live-edit](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/dev-tools-2.gif\")
<\/a>Live-edit a style<\/figcaption><\/figure>\n1.1.3 Examine and edit box model parameters<\/h4>\n
Examine and edit the current element\u2019s box model parameters using the Computed pane. All values in the box model are editable, just click on them.<\/p>\n![\"Computed](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/dev-tools-3.jpg\")
<\/a>Computed Pane<\/figcaption><\/figure>\nThe concentric rectangles contain the top<\/strong>, bottom<\/strong>, left<\/strong>, right<\/strong> values for the current element\u2019s padding, border, and margin properties.<\/p>\n1.1.4 Undo Changes<\/h4>\n
If you haven\u2019t set up persistent authoring, any time you reload the page, all live-edits are lost.
\nAssuming you\u2019ve set up persistent authoring, to undo changes:<\/p>\n
\n- Use
Ctrl+Z<\/code> (Windows) or Cmd+Z<\/code> (Mac) to quickly undo minor changes to the DOM or styles via the Elements panel.<\/li>\n- To undo all local modifications made to a file, open the Sources<\/strong> panel and select revert next to the filename.<\/li>\n<\/ul>\n
<\/a>1.2 Edit Styles<\/h3>\nYou can add or edit styles within the Styles pane in the Elements panel in the following ways:<\/p>\n
\n- Edit an existing property name or value.<\/li>\n
- Add a new property declaration.<\/li>\n
- Add a new CSS rule.<\/li>\n<\/ul>\n
1.2.1 Inspect styles applied to an element<\/h4>\n
The Styles pane shows the CSS rules that apply to the selected element, from highest priority to lowest. In more detail, here is the meaning to different sections or signs in your style pane.<\/p>\n![\"Styles](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/dev-tools-4.jpg\")
<\/a>Styles Pane Items<\/figcaption><\/figure>\n\n- Rules that have been overridden by cascading rules are shown with strikethrough text.<\/li>\n
- Styles associated with a selector that matches the element.<\/li>\n
- User agent stylesheets are clearly labelled, and are often overridden by the CSS on your web page.<\/li>\n
- Inherited styles are displayed as a group under the \u201cInherited from \u201d header. Click the DOM node in the header to navigate to its position in the DOM tree view.<\/li>\n
- Grey colored entries are rules that are not defined but instead computed at runtime.<\/li>\n<\/ol>\n
1.2.2 Edit an existing property name or value<\/h4>\n
Click on a CSS property name or property value to edit; press Tab or Enter to change the name or value. When editing a numeric CSS property value, increment and decrement numeric CSS property values using the following shortcuts:<\/p>\n
\n- Press
Up<\/code> or Down<\/code> to increment or decrement the value by 1 (or by .1 if the current value is between -1 and 1).<\/li>\n- Press
Alt<\/code> + Up<\/code> or Alt<\/code> + Down<\/code> to increment or decrement the value by 0.1.<\/li>\n- Press
Shift<\/code> + Up<\/code>\/Down or PageUp<\/code>\/PageDown<\/code> to increment or decrement the value by 10.<\/li>\n- Press
Shift<\/code> + PageUp<\/code>\/PageDown<\/code> to increment or decrement the value by 100.<\/li>\n<\/ul>\n<\/a>1.3 Edit the DOM<\/h3>\nThe DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through DOM updates.<\/p>\n
1.3.1 Inspect an element<\/h4>\n
Use the Elements panel to inspect all elements in your page in one DOM tree. Select any element and inspect the styles applied to it.<\/p>\n
- \n
- 1.1 Inspect and Tweak Your Pages<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 1.2 Edit Styles<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 1.3 Edit the DOM<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 2. Console<\/a><\/dt>\n
- \n
- \n
- 2.1 Using the Console<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 2.2 Iteract from Command Line<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 3. Sources<\/a><\/dt>\n
- \n
- \n
- 3.1 Debugging with Breakpoints<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 3.2 Set Up Persistence with DevTools Workspaces<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 4. Network<\/a><\/dt>\n
- \n
- \n
- 4.1 Network Panel Basics<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 4.2 Network Throttling<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 5. Timeline<\/a><\/dt>\n
- \n
- \n
- 5.1 How to look at performance<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 5.2 Analyze Runtime Performance<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 6. Profiles<\/a><\/dt>\n<\/dl>\n
- \n
- 7. Resources<\/a><\/dt>\n
- \n
- \n
- 7.1 Manage Data<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 8. Device Mode<\/a><\/dt>\n
- \n
- \n
- 8.1 Device Mode<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 8.2 Emulate Mobile Viewports<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 9. Conclusion<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Elements<\/h2>\n
Use the Elements panel to iterate on the layout and design of your site by freely manipulating the DOM and CSS.<\/p>\n
<\/a>1.1 Inspect and Tweak Your Pages<\/h3>\n
1.1.1 Live Edit a DOM Node<\/h4>\n
To live-edit a DOM node, simply double-click a selected element and make changes:<\/p>\n
<\/a>Live-edit a DOM node<\/figcaption><\/figure>\n The DOM tree view shows the current state of the tree; it may not match the HTML that was originally loaded for different reasons. For example, you can modify the DOM tree using JavaScript; the browser engine can try to correct invalid author markup and produce an unexpected DOM.<\/p>\n
1.1.2 Live Edit a Style<\/h4>\n
Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).<\/p>\n
To edit a name or value, click on it, make your changes, and press
Tab<\/code> orEnter<\/code> to save the change.<\/p>\n<\/a>Live-edit a style<\/figcaption><\/figure>\n 1.1.3 Examine and edit box model parameters<\/h4>\n
Examine and edit the current element\u2019s box model parameters using the Computed pane. All values in the box model are editable, just click on them.<\/p>\n
<\/a>Computed Pane<\/figcaption><\/figure>\n The concentric rectangles contain the top<\/strong>, bottom<\/strong>, left<\/strong>, right<\/strong> values for the current element\u2019s padding, border, and margin properties.<\/p>\n
1.1.4 Undo Changes<\/h4>\n
If you haven\u2019t set up persistent authoring, any time you reload the page, all live-edits are lost.
\nAssuming you\u2019ve set up persistent authoring, to undo changes:<\/p>\n- \n
- Use
Ctrl+Z<\/code> (Windows) orCmd+Z<\/code> (Mac) to quickly undo minor changes to the DOM or styles via the Elements panel.<\/li>\n- To undo all local modifications made to a file, open the Sources<\/strong> panel and select revert next to the filename.<\/li>\n<\/ul>\n
<\/a>1.2 Edit Styles<\/h3>\n
You can add or edit styles within the Styles pane in the Elements panel in the following ways:<\/p>\n
- \n
- Edit an existing property name or value.<\/li>\n
- Add a new property declaration.<\/li>\n
- Add a new CSS rule.<\/li>\n<\/ul>\n
1.2.1 Inspect styles applied to an element<\/h4>\n
The Styles pane shows the CSS rules that apply to the selected element, from highest priority to lowest. In more detail, here is the meaning to different sections or signs in your style pane.<\/p>\n
<\/a>Styles Pane Items<\/figcaption><\/figure>\n - \n
- Rules that have been overridden by cascading rules are shown with strikethrough text.<\/li>\n
- Styles associated with a selector that matches the element.<\/li>\n
- User agent stylesheets are clearly labelled, and are often overridden by the CSS on your web page.<\/li>\n
- Inherited styles are displayed as a group under the \u201cInherited from \u201d header. Click the DOM node in the header to navigate to its position in the DOM tree view.<\/li>\n
- Grey colored entries are rules that are not defined but instead computed at runtime.<\/li>\n<\/ol>\n
1.2.2 Edit an existing property name or value<\/h4>\n
Click on a CSS property name or property value to edit; press Tab or Enter to change the name or value. When editing a numeric CSS property value, increment and decrement numeric CSS property values using the following shortcuts:<\/p>\n
- \n
- Press
Up<\/code> orDown<\/code> to increment or decrement the value by 1 (or by .1 if the current value is between -1 and 1).<\/li>\n- Press
Alt<\/code> +Up<\/code> orAlt<\/code> +Down<\/code> to increment or decrement the value by 0.1.<\/li>\n- Press
Shift<\/code> +Up<\/code>\/Down orPageUp<\/code>\/PageDown<\/code> to increment or decrement the value by 10.<\/li>\n- Press
Shift<\/code> +PageUp<\/code>\/PageDown<\/code> to increment or decrement the value by 100.<\/li>\n<\/ul>\n<\/a>1.3 Edit the DOM<\/h3>\n
The DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through DOM updates.<\/p>\n
1.3.1 Inspect an element<\/h4>\n
Use the Elements panel to inspect all elements in your page in one DOM tree. Select any element and inspect the styles applied to it.<\/p>\n
- Press
- Press
- To undo all local modifications made to a file, open the Sources<\/strong> panel and select revert next to the filename.<\/li>\n<\/ul>\n
- Use
- 9. Conclusion<\/a><\/dt>\n<\/dl>\n<\/div>\n
- \n
- \n
- 8. Device Mode<\/a><\/dt>\n
- \n
- 7. Resources<\/a><\/dt>\n
- 6. Profiles<\/a><\/dt>\n<\/dl>\n
- \n
- \n
- 5. Timeline<\/a><\/dt>\n
- \n
- \n
- 4. Network<\/a><\/dt>\n
- \n
- \n
- 3. Sources<\/a><\/dt>\n
- \n
- \n
- 2. Console<\/a><\/dt>\n
- \n
- \n