Browser Developer Tools
3.6 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
512 students enrolled

Browser Developer Tools

Get to know various Browser Developer Tools for popular browsers & use them to debug & speed up your development process
3.6 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
512 students enrolled
Last updated 12/2015
English
English [Auto]
Current price: $55.99 Original price: $79.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Know how to get most of the browser developer tools
  • Learn how to debug your code i.e javascript and css using debugger tools provieded by various browsers
  • Learn how to read minified scripts using different browsers
  • Learn how you can play with Document Object Model using tools provided by browsers
  • Learn how you can see what's affecting your page load time
  • Manage memory issues
  • Save your changes directly from browser to your code files
Course content
Expand all 29 lectures 03:07:49
+ Chrome Developer Tools
8 lectures 52:39

Modifying DOM-(Document Object Model) on the fly

Preview 06:18

Learn how to use the network panel and analyze

Resource Info - size, type, etc

Server Response Details

Timeline of network details

Time of network requests

Network Panel
09:44

Learn how to

Modify application source files

Track file versions

Export changes

Sources Panel
04:50

In this lecture we will cover

Rendering Performance

CPU Profiling

Timeline Panel & Profiles
04:37

Debug live code with breakpoints

Reading minified code

Working with Local Storage

Debugging & Resources Panel
10:13

Working with console

Examining Exceptions

Element Selector Shortcuts

Console Panel
09:11

Finding Memory Leaks

Memory View - Timeline Panel
04:58

Emulate Browsers, screen sizes

Preview 02:48
+ Firebug for Mozilla Firefox
7 lectures 41:25

What is Firebug

How to install Firebug

Preview 02:17

Modifying DOM-(Document Object Model) on the fly

Preview 07:15

Learn how to use the network panel and analyze

Resource Info - size, type, etc

Server Response Details

Timeline of network details

Time of network requests

Network Panel
04:06

Working with console

Examining Exceptions

Element Selector Shortcuts

Console Panel
09:49

Debugging your code

Script Panel
07:59

Working with StyleSheets

CSS Panel
07:21

Managing Cookies

Cookies Panel
02:38
+ Internet Explorer Developer Tools - F12 Tools
8 lectures 58:45

Modifying DOM-(Document Object Model) on the fly

Preview 08:40

Working with console

Console Panel
07:22

Debugging your javascript

Debugger Panel
07:50

Learn how to use the network panel and analyze

Resource Info - size, type, etc

Server Response Details

Timeline of network details

Time of network requests

Network Panel
08:10

Analyze UI Performance

UI Responsiveness Panel
05:46

Profiling your script

Profile Panel
06:46

Diagnosing memory problems

Memory Panel
10:29

Emulate Browsers, screen sizes

Emulation Panel
03:42
+ Popular JavaScript Framework Tools
4 lectures 10:26
React Developer Tool for Chrome
02:53
Ember JS - Ember Inspector
02:23
Angular JS - Batarang
02:39
Angular JS - ng-inspector
02:31
+ Conclusion & Code Download
1 lecture 00:00
Conclusion & Code Download
23 pages
Requirements
  • HTML
  • CSS
  • JavaScript
  • Browser knowledge
Description

Learn how you can make use of browser development tools to make web pages better.

This course tells you everything that you as a web-developer or web-designer needs to know when it comes to debugging your JavaScript or style-sheets using developer tools for browsers

Learn how you can dynamically change HTML and apply style-sheets to your web-pages and then save the same back to your source files all directly from the browser.

You will also learn how you can read minified scripts

This course also covers various other important topics like managing memory, optimizing page load time of web pages.

All lectures are recorded in HD quality video which ensures that you will not miss a thing.

So let's start learning now..

Who this course is for:
  • Web Developers
  • Web Designers
  • Aspiring Web Developers
  • Aspiring Web Designers
  • Testers