Google Chrome Developer Tools: Updated 2016

Updated for 2016 with 3 Bonus Lectures on SEO, Mobile Page Speed, and Google Fonts
4.2 (14 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
269 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 12
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

Web development and the tools developers use are changing all the time. As more development is done with a mobile-first mindset, your development tools must change too.

Learn browser-based tools that make your websites look better, load faster, and perform efficiently across ALL devices.

  • Debug and alter HTML and CSS directly in the browser
  • Work with Chrome’s V8 JavaScript engine in the console to build awesome web apps
  • Emulate mobile devices and tablets to truly test responsive page designs
  • Access HTML5 LocalStorage and other persistent data stores
  • Analyze network usage for your site and get faster
  • Bonus content on SEO with Google Keyword Planner, mobile speed with Google PageSpeed Insights, and free fonts with Google Font API

Stay Up-to-Date or Get Ahead with the Google Chrome Development Tools

Learning how to use the Google Chrome Development Tools will help you take your web design and development skills to the next level. Whether you focus on shaving pixels on the front end, or crave speed and efficiency in loading and download speed, this course will show you how to maximize the awesome tools that ship free with any Chrome browser.

Content and Overview

This course is intended for people with all levels of exposure to HTML, CSS, and JavaScript. You will get the most out of this course if you know some HTML & CSS, have written some JavaScript or jQuery, or have hosted your own website or application.

The course content consists of video lectures that demonstrate how to use different parts of the Google Chrome Development Tools using real world examples of working pages and applications. Over 10 lectures and 1 hour of content, you will learn how to take apart web pages to make them better and more efficient. The videos in this course were updated in 2016 to reflect the latest technologies available in the Google Chrome Development Tools.

What are the requirements?

  • How to download and install the Google Chrome web browser

What am I going to get from this course?

  • Over 10 lectures and 1 hour of content
  • Using Google Chrome Development Tools to examine real-world page and applications
  • Accurately test mobile page layouts on more than 10+ devices
  • Optimize your page assets to improve page load time on desktop and mobile
  • Understand how HTML5 LocalStorage can help you write awesome web apps
  • Work with HTML, CSS & JS like a boss and own the browser

What is the target audience?

  • This course is intended for people with all levels of exposure to HTML, CSS, and JavaScript.
  • You will get the most out of this course if you know some HTML & CSS, have written some JavaScript or jQuery, or have hosted your own website or application

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Start Here
03:56

In this lecture video, I will show you the different ways to access the Google Chrome Development tools and explain the basics of the interface.

Keyboard Shortcuts

Mac: CMD-OPTION-I

PC: CTRL-SHIFT-I

04:29

In this lecture video, I will show you the different ways to access the Google Chrome Development tools and explain the basics of the interface.

Keyboard Shortcuts

Mac: CMD-OPTION-I

PC: CTRL-SHIFT-I

3 questions

This quiz will assess your knowledge of how to access the chrome dev tools and navigate the main parts of its interface.

Section 2: Working with HTML and CSS in Chrome Dev Tools
06:15

In this lecture, we will examine the Elements Panel, which will allow you to edit HTML and CSS in the browser. After watching the video, try the optional application activity outline below.


Optional Application Activity

  1. Go out to a web page and open the elements panel
  2. Using the techniques outlined in this lecture, make a change to the HTML or CSS of the page
  3. In the course discussion board, either create your own thread or comment on another student's thread describing what you did
4 questions

This quiz will test your knowledge of the elements panel in the Google Chrome Dev Tools.

Section 3: Working with JavaScript in Chrome Dev Tools
09:36

In this lecture, we will examine the JavaScript Console, which will allow you to access error messages, examine AJAX requests, and interact with JavaScript objects. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Download the .zip files with a few example data visualizations and run from a local web server. 
  2. Using the techniques outlined in these lectures, examine the console output or set a JavaScript breakpoint and access a variable in the console
  3. In the course discussion board, either create your own thread or comment on another student's thread describing what you did
04:30

In this lecture, we will examine the Sources Panel, which will allow you to set breakpoints to help you debug JavaScript. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Go out to a web page and open the JS console and Sources Panel
  2. Using the techniques outlined in these lectures, examine the console output or set a JavaScript breakpoint and access a variable in the console
  3. In the course discussion board, either create your own thread or comment on another student's thread describing what you did
4 questions

This quiz will test your knowledge of the JS console and the Sources Panel.

Section 4: Working with Browser Storage in Chrome Dev Tools
03:55

In this lecture, we will examine the Resources Panel, which will allow you to access different types of storage available in the browser. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Go out to a web page and open the Resources Panel
  2. Using the techniques outlined in these lectures, examine the different storage folders. What do you see? Did a site put a cookie in your browser, or does a site you use employ LocalStorage to store information on the browser?
  3. In the course discussion board, either create your own thread or comment on another student's thread describing what you did
Getting Started with the Resources Panel
2 questions
Section 5: Thinking Mobile First in Chrome Dev Tools
04:20

In this lecture, we will look at how to emulate mobile devices with the Dev Tools to test responsive designs. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Go out to a web page and open the mobile emulation tools
  2. Using the techniques outlined in these lectures, test out a few sites on different mobile devices. How did the designs perform at different viewport confiigurations? Did the simulated touch cursor give you any difficulty scrolling or tapping?
  3. In the course discussion board, either create your own thread or comment on another student's thread describing what you did
Getting Started with the Mobile Device Emulation
3 questions
Section 6: Analyzing Page Load Time in Chrome Dev Tools
13:16

In this lecture, we will look at how to optimize pages using the Network Panel. After watching the lectures, consider completing the optional application activity below.

Optional Application Activity

  1. Open the network panel and begin recording a network log
  2. Examine the results. How long did everything take to reload? What is your total page weight? Where do you see resources that you could optimize?
  3. Post to the discussion boards about the results of your test
06:20

In this lecture, we will look at how to optimize pages using the Audits Panel. After watching the lectures, consider completing the optional application activity below.

Optional Application Activity

  1. Open the Audits Panel
  2. Perform an audit of you site
  3. Post to the discussion boards about the results of your test
Getting Started with the Network and Audit Panels
5 questions
Section 7: Bonus Content
06:42

In this lecture, we will look at how to optimize pages using Google PageSpeed Insights. After watching the lectures, consider completing the optional application activity below.

Optional Application Activity

  1. Go to the Google PageSpeed Insights link below
  2. Submit a URL for your site or another site
  3. Post to the discussion boards about the results of your test
06:45

In this lecture, we will look at how to using the Google Keyword Planner to help you improve your SEO. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Do some quick research for keywords that appear on your blog or site.
  2. How many monthly searches are the keywords getting? What is the competition like? Did you find any good keywords that you haven't thought of before?
  3. Post to the discussion board about your findings
07:26

In this lecture, we will look at how to install free fonts from Google Fonts to spice up your websites. After watching the video, try the optional application activity outline below.

Optional Application Activity

  1. Download the work files and try it for yourself in a folder on the desktop.
  2. Test this out on your own site!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Jeff Everhart, Web Developer and Technology Trainer

Jeff has been working on the web since before smartphones existed and spends most of his working hours making difficult technology concepts easier to understand. Jeff specializes in full-stack JavaScript applications, data visualization, GoogleApps, and WordPress development. With several years of online teaching experience and technology training in higher education, you can ensure that Jeff's courses are of the highest quality possible.

Ready to start learning?
Take This Course