Chrome Developer Tools Amit Agarwal tutorial

<p>Apr 05, 2016 02:26 PM &nbsp;&nbsp;9 min 30 second of pure magic!

on Chrome Dev tools..</p>

<p>

tip... open this in IE or Firefox... that way you can save &nbsp;Chrome to actually&nbsp;

do the exporation...</p>

<p>

his dummy webpage is &nbsp;&nbsp;&nbsp;<a href="http://img.labnol.org/files/royal.baby.html">http://img.labnol.org/files/royal.baby.html</a> &nbsp;&nbsp;&nbsp;it is still there; try it!</p>

<p>

use <b>control shift &nbsp;C</b> (or I or J) or F12 &nbsp;to open it.</p>

<p>

note: &nbsp;only &nbsp;control shift C gets into that obnoxious mode... so use &nbsp;F12.</p>

<p>

&nbsp;

note ... can dock it... &nbsp;&nbsp;click the triple &nbsp;vert dots to see menu..</p>

<p>

control shift &nbsp;f &nbsp;to search all files &nbsp;(that went into making the web page.</p>

<p>

&nbsp;

control shift C &nbsp;gets you into the dev tools...</p>

<p>

note: &nbsp;magnifying glass appears not to exist anymore... but you do not need it.</p>

<p>

from abt minute &nbsp;4 on...</p>

<p>

to get into console... click<b> CONSOLE and F1 &nbsp;opens it up</b></p>

<p>

(<b>ESC to get out</b>)</p>

<p>

double click on content above and then R click> &nbsp;inspect element... then can edit it in the code.</p>

<p>

can also drag line around.... &nbsp;click in the white to the right of the line to drag it up or down.</p>

<p>

RIGHT click &nbsp;an element... can delete it; &nbsp;hide it;&nbsp;</p>

<p>

he selects some text and gets to its &nbsp;CSS properties eg font-size

(note: &nbsp;must click &nbsp;in the CODE &nbsp;(not above on the website)

changes font-size</p>

<p>

use arrow keys to incr/decr in intervals of one

or SHIFT and arrow keys to incr by 10.</p>

<p>

min 3 &nbsp;....he edits the bkgrnd color of the body...

click body in the code &nbsp;and then click &nbsp;background-color in styles window.</p>

<p>

up down arrows to cruise thru colors

click color box &nbsp;to get &nbsp;color picker.

or type in antique white &nbsp;etc. &nbsp;or blue.</p>

<p>

&nbsp;</p>

<p>

<b>document.body.contentEditable=true</b>....</p>

<p>

(set that in the console, then you can edit text right in the website!)</p>

<p>

at min 5 he shows &nbsp;chrome dev tools &nbsp;calculations...(can incorpor javascript notation)</p>

<p>

2+ 2 &nbsp;enter &nbsp;&nbsp;4</p>

<p>

math.sqrt(512)</p>

<p>

new Date ("October 10, 2012") &nbsp;- &nbsp;&nbsp;new Date("May 21, 2012")

give you interval in millisecons...</p>

<p>

$_ &nbsp;&nbsp;says operateon previous &nbsp;variable</p>

<p>

window.innerWidth to see that... v cool</p>

<p>

text = " &nbsp;copy/past paragraph &nbsp;and

then use &nbsp;JS &nbsp;function &nbsp;like</p>

<p>

text.toUpperCase() &nbsp;or</p>

<p>

text.length...</p>

<p>

&nbsp;</p>