Google Chrome Dev Tools

Pataasin ang iyong marka sa homework at exams ngayon gamit ang Quizwiz!

Live edit page and inspect elements on a page

change html and css

console.warn("<any string>")

prints warning message .

add or edit attributes of an element

right click + edit as html

console.assert()

used for testing takes a boolean expression as parameter

Network optimizations

Minify the resources (.js, .css) and then have only one javascript file so that only one network request is required for that. Less network request more faster load.

Pause on exceptions icon (||) on the right

When an error occurs the code will pause. Then hover over a variable and you will get the value.

change element location

click and drag elements to change its location on the page

selecting elements on a page

click magnifying glass and hover over page

Dev Tools can prettify minified code

click on the { } at the bottom left under sources panel

how to re download and replace cache copies

click shift + refresh button

for javascript debugging

console is required interact with your app's views and scripts run javascript commands view log output

edit style values

double click on value to edit

How to see local storage in dev tools

find in resources panel

history of selected elements

$0 - most recent selected element $1 - before that $2 - before that and so on

disabling cache - this helps in debugging performance of web page

one way is use incognito 2nd way is click settings icon on the right and disable cache

Elements panel important note

All changes are temporary. To make changes to source files we have to use source panel

Alternative to document.querySelector("<any element id>")

Alternative is to use bling (console helper method) $("<any element id>")

Network Panel resources

Check if server has correct cache settings

how to enable and disable styles

Checkboxes next to style to enable and disable

Pausing only on uncaught exceptions

Click pause on exception icon again

Network Panel

Contains resource info - size, type ,etc Server response details Timeline of network requests

Timeline has Two other lines

Dom content loaded event line (blue)- browser finished parsing html file but still loading resources red line after this - when resources finished downloading

Tools for network optiminzations

Google Closure - does minification. PageSpeed plugin from google chrome web store

understanding the timeline of network requests.

Timeline represented using two bars The translucent bar shows latency of requests. (from when we asked for the resource to when it started the response) the solid part is the time taken to download resource different file types have different color timelines

304 status code means

browser has local cached copy of the resource request with itself and will use that one

Errors that pop up when reading data from local storage

can edit local storage in resources panel

toggle element state

change styles on hover, active, visited states

Meddling with CSS Styles

enable/disable,add new style properties edit rules on pseudo classes what file the style came from- breadcrumb trail.

Learn about Console API

https://developer.chrome.com/devtools/docs/console-api

Examining exceptions

in the console we get a stack trace along with file and line number

to find an element using console

inspect( $("<any element id>") )

You can see how much time it took to load a page

its at the bottom of network panel

Debugger break point

just click next to the line. execution pauses at breakpoint. Execution controls - resume (execution until next breakpt), Step over, step into, step out, de-activate breakpts

Sources panel

modify application source files export changes track file versions

how css style elements are written in dev tools

most specific comes first (inline styles) then rest.

Add a style to an element

select the element and click + button

Exporting changes done on source files

we get a star next to the name when we make any changes to source file. That means we need to save it to the browser's storage (not original source files). Right click and click save as to overwrite original file


Kaugnay na mga set ng pag-aaral

Macro economics: Chapter 1 study example questions

View Set

Chpt. 11 Promoting a healthy work environment

View Set

Abeka 4th Grade History Pgs 17-23 Ch #2

View Set

MUSCHII COAPSEI (extensori; flexori; adductori)

View Set

ANTH 1003 Auburn Cox Midterm Study Guide

View Set