SRC Web Team Tools & Tech

# Browser Developer Tools

In depth documentation: https://developers.google.com/web/tools/chrome-devtools

# Elements and Inspect

You can inspect elements on the page and alter classes/ tags.You can also edit the CSS rules on a tag and see any attached events.

# Console

You can write global JS and access global variables from the console. Log outputs show up here as well.

  • console.log(‘regular styled message’)
  • console.warn(‘message with a warning icon’)
  • console.error(‘message with an error icon’)

# Network

View network requests and responses

# Performance

Website performance during runtime https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

# Application

View caches, IDB, cookies, localstorage, service workers and manifest.json

# Plugins

You can install extensions through the Chrome Store

  • Vue dev tools
  • REST API client
  • Zenhub

# Security

View SSL certificates

# Debugger Keyword

Set a breakpoint in the code by using the debugger keyword. https://www.digitalocean.com/community/tutorials/debugging-javascript-with-google-chrome-devtools-and-visual-studio-code

← Hypertext Transfer Protocol (HTTP) →