Chrome DEV Tools

FOR DEsigners

ConvergeSE 2015

Caner Uguz

(Junn-air Ooze)

@caneruguz 

Programming

College

Historian

Librarian

Teacher

Instructional Technology

I work at

CENTER FOR OPEN SCIENCE

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

console + jQUERY = magic

why use this?

... because clients

why use this?

... because time

why use this?

... because refreshing is for chumps

CAN ONLY ChROME DO THIS? 

No. 

Safari has Web Inspector

Make Safari Web Inspector Visible

Firefox has Inspector and Firebug

Courses on Dev Tools:

but wait!  there's more: 

Basic introductions to CSS and jQuery Presentation

questions?

this slide at:

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

http://spkr8.com/t/57551

Chrome Dev Tools for Designers

By Caner Uguz

Chrome Dev Tools for Designers

Learn more about what Chrome Developer Tools can do to improve the design process.

  • 502
Loading comments...

More from Caner Uguz