Getting More Out of Chrome's Developer Tools

Chrome’s Developer Tools (or DevTools for short) are invaluable, yet often underutilized, resources for web developers of all skill levels.

Learning how to master them will ramp up your skill set and help you become a better developer in a number of ways-- you’ll become familiar with how the browser renders DOM elements, you’ll figure how to uncover inefficiencies in your code, and you’ll speed up your debugging process so that you can quickly find what’s wrong when your code isn’t working as expected.

This workshop will start with the basics and move through to advanced features so that students leave with an understanding of how and why they’d want to use each panel in DevTools.

We’ll cover the following:

• Customizing settings

• Inspecting and editing HTML + CSS in the Elements panel

• Viewing project directory files in the Resources panel

• Analyzing server requests in the Networks panel

• Performing code tests in the Audits panel

• Viewing error logs in the Console

• Using Device Emulation to debug touch events on desktop

• Using Workspaces to map directories so that changes made in the browser can be written to local disk without copy/pasting

• Stepping through breakpoints to debug JavaScript in the Sources panel

Students should have a working knowledge of HTML and CSS. Familiarity with jQuery and JavaScript will be beneficial, but it is not required. Please bring a laptop with a text editor (Sublime Text 3 is recommended) and Chrome installed.

About the Instructor:

http://photos3.meetupstatic.com/photos/event/e/3/6/4/600_392158212.jpeg

A former English teacher in NYC, Alexandra recently transitioned careers into web development. She took her first class in HTML + CSS with GDI Philly in Fall 2012, and a year later began working as a full-time front-end developer at Urban Outfitters. She continues to attend GDI classes as a student and a TA. When she's not spending her time learning and hacking on web projects, Alexandra works on lots of DIY craft projects and blogs about them here (http://philodendron.co)!

All attendees are expected to abide by the Girl Develop It Code of Conduct (http://www.girldevelopit.com/codeofconduct).