Browser Developer Tools

Name: Browser Developer Tools
Rating: 3.6 (35 reviews)

Get to know various Browser Developer Tools for popular browsers & use them to debug & speed up your development process

Created bySkillBakery Studio

Last updated 12/2015

English

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

6 sections • 29 lectures • 2h 44m total length

Introduction1:34

Elements Panel6:18
Modifying DOM-(Document Object Model) on the fly
Network Panel9:44
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
Sources Panel4:50
Learn how to

Modify application source files

Track file versions

Export changes
Timeline Panel & Profiles4:37
In this lecture we will cover

Rendering Performance

CPU Profiling
Debugging & Resources Panel10:13
Debug live code with breakpoints

Reading minified code

Working with Local Storage
Console Panel9:11
Working with console

Examining Exceptions

Element Selector Shortcuts
Memory View - Timeline Panel4:58
Finding Memory Leaks
Emulators - Mobile View2:48
Emulate Browsers, screen sizes

Installing Firebug2:17
What is Firebug

How to install Firebug
Elements Panel - HTML DOM View7:15
Modifying DOM-(Document Object Model) on the fly
Network Panel4:06
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
Console Panel9:49
Working with console

Examining Exceptions

Element Selector Shortcuts
Script Panel7:59
Debugging your code
CSS Panel7:21
Working with StyleSheets
Cookies Panel2:38
Managing Cookies

Elements Panel - DOM Explorer8:40
Modifying DOM-(Document Object Model) on the fly
Console Panel7:22
Working with console
Debugger Panel7:50
Debugging your javascript
Network Panel8:10
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
UI Responsiveness Panel5:46
Analyze UI Performance
Profile Panel6:46
Profiling your script
Memory Panel10:29
Diagnosing memory problems
Emulation Panel3:42
Emulate Browsers, screen sizes

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

Browser Developer Tools

What you'll learn

Explore related topics

Course content

Introduction to Browser Developer Tools1 lecture • 2min

Chrome Developer Tools8 lectures • 53min

Firebug for Mozilla Firefox7 lectures • 41min

Internet Explorer Developer Tools - F12 Tools8 lectures • 59min

Popular JavaScript Framework Tools4 lectures • 10min

Conclusion & Code Download1 lecture • 23min

Requirements

Description

Who this course is for: