Developer Tools to debug Chrome DevTools

1-1 Chrome DevTools Features

(Nine functional panel)

(1) Elements panel element

Check and adjust the page, debugging DOM, CSS debugging

(2) Network Network panel

Debug request, understand page static resource distribution, web performance testing

(3) Console console panel

Debugging javascript, viewing console log logs, interactive debugging code

(4) Sources source code resources panel

Debugging JavaScript page source code, breakpoint debugging code

(5) Application Application panel

View & debug client-side storage, such as Cookie, LocalStorage, SessionStorage etc.

(6) Performance Performance panel

View performance details page, fine-grained on page load performance optimization (high order)

(7) Memory Memory panel

JavaScript CPU analyzer, heap analyzer (high order)

(8) Security Security panel

View Page Security and certificate problems (high order)

(9) Audits panel

Use Google Lighthouse assist performance analysis, optimization recommendations are given (high order)

Open Chrome Developer Tools

• Select the menu in chrome: More Tools -> Developer Tools
• Right-click and select "Check" on page elements

• Shortcuts
  to open a recently closed state:
  Cmd + Opt + the I (mac)
  Ctrl + the Shift + the I (Windows)

  Quick View DOM or style:
  the Command + C + the Option (Mac)
  Control + the Shift + C (Windows)

  Quick View log into the Console run Javascript:
  the Command + the Option + J (Mac)
  Control + the Shift + J (Windows)

• F12

View and select DOM nodes

• DOM select the page, the DOM in the reverse position is positioned to the page
• DOM in search (Command + F) in

Real-time editing and HTML DOM node

• Edits
• Edit Properties Attributes
• Modify the element type
• The order adjustment DOM node
• Like an editor to edit the HTML code
• Hide / delete / add / copy node

In Console Access Node

• Use document.querySelectAll access

• Using the Quick Access selected elements $ 0
  

• Copy -> JS Path
  

  

In the DOM breakpoint debugging

• Interrupted when the property changes point
  break on -> attribute modifications
• Interrupted when deleting a node point
  break on -> node removal
• Interrupted when the sub-tree modification point
  break on -> subtree modifications
  

# In the element increases the dynamic pseudo-classes and classes

• status
  

• Element classes
  

• The new rules
  

Quick commissioning CSS values ​​and color graphics animation

1) Visualization

• Text shadow
  

• Shadow box
  

• colour
  

• Background color
  

• Animation
  

Recommended sites:

Introduction and interactive command console panel

1. Run javascript code, interactive programming
2. log Log Viewer in print
3. Breakpoint debugging code Debugging

In the console debug log in

1. console.log print information
2. console.warn alarms
3. console.error error message
4. console.table display complex information in JSON format
   
5. console.group Information Group shows
   
6. console.custom custom style
   
   % c as the second parameter styles
7. Network error Display Network request

The basic process of debugging Javascript