JavaScript Debugging (Chrome developer tools tips and tricks)

Link: Chrome DevTools

Chrome DevTools

Chrome DevTools is a set of authoring, debugging, and profiling tools built into Google Chrome.

Open DevTools

  • Select More Tools > Developer Tools from Chrome’s Main Menu.
  • Right-click a page element and select Inspect.
  • Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

Elements panel

Elements Panel

Iterate on the layout and design of your site by freely manipulating the DOM and CSS.

Console panel

Console Panel

Log diagnostic information during development or interact with the JavaScript on the page.

Sources panel

Sources Panel

Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor.

Network panel

Network Panel

Optimize page load performance and debug request issues.

Performance panel (previously Timeline panel)

Timeline Panel

Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.

Memory panel (previously Profiles panel)

Profiles PanelProfile memory usage and track down leaks.

Application panel

Application Panel

Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.

Security panel

Security Panel

Debug mixed content issues, certificate problems, and more.

Discover DevTools

Device Mode

Device ModeBuild fully responsive, mobile-first web experiences.

Advertisements

One thought on “JavaScript Debugging (Chrome developer tools tips and tricks)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s