Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Advanced debugging with Chrome DevTools

Wayne Elgin (Cantina Consulting)
1:30pm–5:00pm Tuesday, June 20, 2017
Frontend Tools
Location: 210 DH Level: Intermediate
Secondary topics:  Browser tools, JavaScript/ES6, Tools
Average rating: ****.
(4.16, 19 ratings)

Who is this presentation for?

  • Frontend developers and backend Node.js developers

Prerequisite knowledge

  • A general understanding of debugging, how to set a basic breakpoint, and how to use console logs within a browser's dev tools interface

Materials or downloads needed in advance

  • A laptop with Google Chrome Canary loaded with the repository code provided for the tutorial (provided prior to the conference) and the current version of Node.js (at least v6.3.0) installed

What you'll learn

  • Explore approaches to debug your JavaScript code and learn when those tools are a good fit for symptoms you encounter
  • Understand how to debug both frontend and backend code, including your project's build tooling, with the same Chrome DevTools

Description

Debugging JavaScript apps can be frustrating and usually ends with you defaulting to console logs to get info out of your app. This is inefficient, and logs can often result in erratic output depending upon the nature of the object.

Wayne Elgin illustrates the latest ways to masterfully march up and down your stack and solve your code’s greatest mysteries, covering lesser-known and new features of Chrome DevTools that allow developers of every skill level to deal with such difficult-to-debug scenarios as asynchronous callbacks, Promises, race conditions, and performance tuning.

Photo of Wayne Elgin

Wayne Elgin

Cantina Consulting

Wayne Elgin is principal user experience consultant at Boston-based agency Cantina. Wayne loves helping people do amazing things with technology, especially the people who use the things he makes on the web. He’s been creating web, video, and learning experiences since 1997 and is passionate about experience design and frontend engineering. He can usually be found in Tennessee, biking with his wife and three kids or collecting PC games on Steam.

Comments on this page are now closed.

Comments

Picture of Wayne Elgin
Wayne Elgin | PRINCIPAL USER EXPERIENCE CONSULTANT
06/20/2017 2:28am PDT

@Dhruv: yes, it is the right repo. You are free to use and build that repo if you would like, but it’s not at all required to participate. Just if you need a local project to work through the Dev Tools work with.

Dhruv Mishra | SOFTWARE ENGINEER
06/19/2017 7:18pm PDT

Hi Wayne,
https://github.com/esjay/dev-tools-fluent-workshop is the right repo and is it ready?

Picture of Wayne Elgin
Wayne Elgin | PRINCIPAL USER EXPERIENCE CONSULTANT
06/16/2017 4:48am PDT

@Jason: thanks for the question. the repo I’m demoing Dev Tools workflows from isn’t strictly required to follow along (you can feel free to use any front-end project you have locally, as well). However I will be publishing a repo to follow along with on my Github this weekend.

The repo is located here, but I haven’t pushed my commits yet.
https://github.com/esjay/dev-tools-fluent-workshop

Jason Golieb | SOFTWARE DEVELOPER
06/16/2017 1:20am PDT

Where’s the repo for this session? It was not provided in the conference check-in email I received.