Debugging Sites Using Chrome DevTools

Focused View

Brice Wilson

1:46:16

9 View

01 - Course Overview

01 - Course Overview.mp4

01:21

02 - Understanding the Capabilities of Chrome DevTools

02 - The Importance of Debugging in the Browser.mp4

02:07

03 - Demo Project Overview and Debugging Scenarios.mp4

05:38

04 - Exploring Whats Possible with Chrome DevTools.mp4

06:01

03 - Examining and Editing Web Pages#

05 - Understanding the Difference between HTML and the DOM.mp4

04:19

06 - Using the Elements Panel to Find and Modify Items in the DOM.mp4

05:23

07 - Troubleshooting and Modifying CSS Styles.mp4

07:35

08 - Saving Changes to Files with Workspaces.mp4

07:00

09 - Using Device Mode to Emulate Multiple Devices.mp4

04:26

04 - Using the Console

10 - Understanding, Navigating, and Creating Log Messages.mp4

06:45

11 - Debugging with the Console API.mp4

06:45

12 - Running JavaScript and Using the Utilities API.mp4

07:36

13 - Creating and Monitoring a Live Expression.mp4

04:59

05 - Debugging JavaScript

14 - Understanding and Using the Sources Panel.mp4

08:47

15 - Creating Breakpoints and Stepping through Code.mp4

08:05

16 - Using Source Maps to Debug Preprocessed Code.mp4

03:56

17 - Creating and Using Snippets.mp4

03:41

06 - Viewing Network Communication and Local Data

18 - Using the Network Panel to Inspect Server Communication.mp4

07:35

19 - Viewing and Editing Local Storage Data.mp4

04:17

Description

Google Chrome ships with a powerful set of tools to help developers debug web sites. This course will teach you how to use those tools to troubleshoot and fix problems in a site's HTML, CSS, and JavaScript.

What You'll Learn?

Debugging client-side web applications can be difficult because they involve a complex mix of HTML, CSS, and JavaScript while also storing data on the client and constantly communicating with a web server. In this course, Debugging Sites Using Chrome DevTools, you'll learn how to use the powerful set of tools included with Chrome to quickly diagnose and fix problems in your client-side applications. First, you'll learn how to examine and edit both the structure and style of a site to make sure your designs are being implemented correctly. Next, you'll discover how to fully harness the power of the browser console to log output, execute JavaScript, and troubleshoot problems. Finally, you'll explore how to step through and debug JavaScript code right in the browser and save fixes back to your development environment. When you're finished with this course, you'll have the skills needed to confidently and efficiently debug modern client-side web applications.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Web App Development

Brice Wilson

Instructor's Courses

Brice Wilson has been a professional developer for over 20 years and has used many tools and programming languages during that time. His current interests are centered on web services, single-page web applications and native mobile development. He has worked as a developer and architect for a number of large companies and enjoys learning, experimenting with, and teaching new technologies. He also blogs at BriceWilson.net.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.