Chrome DEV Tools

FOR DEsigners

ConvergeSE 2015

Caner Uguz

(Junn-air Ooze)

@caneruguz 

http://caneruguz.com/

Programming

College

Historian

Librarian

Teacher

Instructional Technology

I work at

CENTER FOR OPEN SCIENCE

http://cos.io

WE Are hiring!

Open it

inspect element

alt + cmd + i

from menu

STYLES

diagnose existing styles

order of application

overwritten styles

mapping

BOX MODEL

observe and edit

calculated properties

Set and inherited properties on the element

filterable!

EDIT ANY STYLE

add any style

add classes

uncheck styles

incrementing

defaults

COLOR PIcker

Pick color

Pick color from the page

Define color type

HTML CHANGEs

Add elements

Edit Elements

Move about with keyboard

force states

COPY CSS PATH

#download > a > span

SELECT

ELEMENT TO

INSPECT

caveat:

post-render content

Add ons can add html or events to the DOM that is not native. 

workspaces

Map to file

workspaces

Add folder to workspace

workspaces

Local change history

Breakpoints

device

emulation

network throttling

why use this?

... because clients

why use this?

... because time

why use this?

... because refreshing is for chumps

https://www.codeschool.com/courses/discover-devtools

Courses on Dev Tools:

but wait!  there's more: 

http://code.tutsplus.com/courses/chrome-developer-tools

http://teamtreehouse.com/library/website-optimization

Basic introductions to CSS and jQuery Presentation

http://slides.com/caneruguz/live-prototyping-with-chrome-dev-tools-css-and-jquery#/

questions?

this slide at:

https://slides.com/caneruguz/chrome-dev-tools-for-designers/

http://spkr8.com/t/57551