Fábio Assunçãofrontend / backend developerwww.fabioassuncao.com.br

Frontend / backend developer at VAT SA,graduando em Ciências da Computação,pai do Gabriel, apaixonado pelaBabitinha, fígado, arte e tecnologia.Interessado em UX e Interaction Design.

developer.chrome.com/devtools

Desenvolvimento inteligente com

Google Chrome Dev Tools

developer.chrome.com/devtools

Há alguns anos atrás não “existia” uma definição objetiva para

frontend ou backend.

developer.chrome.com/devtools

Algumas definições...

developer.chrome.com/devtools

webdesigner

developer.chrome.com/devtools

webmaster

“menino do HTML”

“Programador de HTML”

Usuários do Windows

Programadores do dreamweaver

“hardcores do Flash”

“fazedores de sites”

webwriter

O tempo passou...

developer.chrome.com/devtools

Os browsers evoluiram…

developer.chrome.com/devtools

developer.chrome.com/devtools

Ops! Apenas alguns…

developer.chrome.com/devtools

developer.chrome.com/devtools

Os mobiles deviceschegaram…

As necessidades são outras,o comportamento mudou.

Um tornado de APIs vieram com o HTML5,novas propriedades foram adicionadas aoCSS3 e muitas novidades chegaram noJavaScript

Consequentemente, muita coisa no workflow também mudou.

Debugar códigos JavaScript usando alert?

Ir e voltar no browser para testar as mudanças de estilo?

Redimensionar a página para

simular responsive design?

If(resposta == ‘sim’){

}

console.log(‘Não teremos o “bug

Cássia Eller”!’);

else{

}

Start!developer.chrome.com/devtools

O que é Chrome Dev Tools?

developer.chrome.com/devtools

Conjunto de ferramentasacopladas ao Chrome paraauditoria, depuração edesenvolvimento. Fornece aosdevs acesso profundo aosrecursos internos do browser,além da aplicação.

developer.chrome.com/devtools

Recursos:• Emulate device• Elements• Network• Sources• Timeline• Profiles• Resources• Audits• Console• PageSpeed

Keyboard Shortcuts

Mão na massa!

developer.chrome.com/devtools