Google Chrome Developer Tools: Updated 2016
4.1 (20 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.
303 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Google Chrome Developer Tools: Updated 2016 to your Wishlist.

Add to Wishlist

Google Chrome Developer Tools: Updated 2016

Updated for 2016 with 3 Bonus Lectures on SEO, Mobile Page Speed, and Google Fonts
4.1 (20 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.
303 students enrolled
Created by Jeff Everhart
Last updated 6/2016
English
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • How to download and install the Google Chrome web browser
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.

Who 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 12 Lectures Collapse All 12 Lectures 01:17:30
+
Start Here
2 Lectures 08:25

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

Preview 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

Preview 04:29

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

Getting Started with Chrome Dev Tools
3 questions
+
Working with HTML and CSS in Chrome Dev Tools
1 Lecture 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
Preview 06:15

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

Getting Started with the Elements Panel
4 questions
+
Working with JavaScript in Chrome Dev Tools
2 Lectures 14:06

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
Using the JavaScript Console
09:36

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
Using the Sources Panel
04:30

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

Getting Started with the Sources Panel and JS Console
4 questions
+
Working with Browser Storage in Chrome Dev Tools
1 Lecture 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
Using the Resources Panel
03:55

Getting Started with the Resources Panel
2 questions
+
Thinking Mobile First in Chrome Dev Tools
1 Lecture 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
Testing Responsive Design by Emulating Mobile Devices
04:20

Getting Started with the Mobile Device Emulation
3 questions
+
Analyzing Page Load Time in Chrome Dev Tools
2 Lectures 19:36

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
Using the Network Panel
13:16

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
Using the Audits Panel
06:20

Getting Started with the Network and Audit Panels
5 questions
+
Bonus Content
3 Lectures 20:53

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
Using Google PageSpeed Insight to Improve Page Load Times
06:42

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
Improving SEO with Google Keyword Planner
06:45

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!
Using Free Fonts with Google Fonts API
07:26
About the Instructor
Jeff Everhart
4.1 Average rating
20 Reviews
303 Students
1 Course
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.