You can get basic knowledge about Elements, Toggle device tool bar,code debugging,Console(with basic programs), Source, Network, Application, audit Document Object Model and Cookies Basics of Google Chrome Developer Tools…

1. Basics of Google Chrome Developer Tools…
by
Satish Shende
satish.sixteen@gmail.com

2. You can get basic knowledge about
 Elements
 Toggle device tool bar
 code debugging
 Console(with basic programs)
 Source
 Network
 Application
 audit
 Document Object Model
 Cookies

3. Elements

4. Toggle device tool bar

5.  Searching for (and fixing) errors in programming
code is called code debugging (identify and remove
errors from (computer)hardware or software).
 console.log() to display JavaScript values in the
debugger window
 With a debugger, you can set breakpoints (places
where code execution can be stopped), and examine
variables while the code is executing.

6. Console

7. var colors = ['red', 'blue', 'green']; alert (colors);
var number = [ 5, 6, 8, 9, 10, 23, 45]; alert (number.length);
var number = [ 5, 6, 8, 9, 10, 23, 45]; alert (number.sort());
Array
var numbers = [5, 77, 6, 34]; alert (numbers[0]+numbers[2]);
a = 50; b = 20; c = a+b; console.log(c);

8. for (var i=0; i<10; i++) { console.log(i);}
For loop

9. Source ->>
• Page
• Filesystem (Add new files)
• Snippet

10. Network

11. application

12. audit

13. Document Object Model
DOM

14. DOM
 Is the browsers internal programmatic representation of the web
page
 Can be manipulated by languages like JS changing the page
without changing HTML
 This is type of API (application programming interface (Facebook ,
Google and Twitter use APIs to allow programmers or website
developers easier access to their services and members))
 Simply put DOM is technically an API that is inside of your browser

15.  When a web page is loaded, the browser creates a
Document Object Model of the page,
 which is an object oriented representation of an HTML
document,
 that acts as an interface between JavaScript and the
document itself and
 allows the creation of dynamic web pages

16. Some examples
 document.getElementByID (id)
 element.getElementByTagName (tag)
 document.createElement (name)

17. Example of DOM hierarchy in an
HTML document

18. Cookies

20. What Are Cookies?
 Cookies are small files which
are stored on a user's computer

22. When are Cookies Created?
Writing data to a cookie is usually done when a new webpage is
loaded
for example after a 'submit' button is pressed the data handling
page would be responsible for storing the values in a cookie.

23. Why are Cookies Used?
Cookies are a convenient way to carry information from one
session on a website to another, or between sessions on
related websites

24. For example
the first time a user visits a site they may choose a username
which is stored in the cookie,
and then provide data such as password, name, address, preferred
font size, page layout, etc. –
this information would all be stored on the database using the
username as a key.
Subsequently when the site is revisited the server will read the
cookie to find the username, and then retrieve all the user's
information from the database without it having to be re-entered.

25. Cookies