devtools

devtools

• tourdedevtools
  https://www.youtube.com/watch?v=VYyQv0CSZOE

Debugging Css

• Inspect Element : right-click > Inspect
• Docking : Command Menu(Ctrl +shift + P) -> right, bottom undock…
• Style pane
• computed panel
• Navigation DOM Tree
  1. Inspect
  2. DOM tree Search(Ctrl + F) -> CSS selectors, XPath, string
  3. console -> inspect(document.querySelector(‘input’)
• Animations
  • Command Menu > Animations tab : speed whwjd, delay,
• Rendering
  • Paint falshing
• autocomplete
  • value : shift+up : 10씩 증가
• SEDU(수도) :hover
• 클래스 추가
• switch to Dark theme
• Contrast radio : color box
• capture screenshot

Debugging Javacript

• console : ctrl + shifrt + j

  • console.log(pets)
  • console.log({pets})
  • console.table(pets)
  • console.trace(‘aaa’)

• Debuggig with source panel

  • debugger
    • Code stepping
    • Call stack
    • Code folding
  • logpoint
  • debugpoint
  • breakpoint