Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Guia do F12: Chrome Developer Tools
Search
Leonardo Tegon
March 23, 2017
Programming
0
99
Guia do F12: Chrome Developer Tools
Dicas de produtividade para desenvolvimento web utilizando as ferramentas do Google Chrome.
Leonardo Tegon
March 23, 2017
Tweet
Share
More Decks by Leonardo Tegon
See All by Leonardo Tegon
Pense 4 vezes antes de fazer herança
tegon
0
93
Maintaining a big open source project: lessons learned
tegon
3
220
Warden - The building block behind Devise (Português)
tegon
0
100
You might not need ElasticSearch
tegon
0
160
Warden: the building block behind Devise
tegon
3
1.2k
Other Decks in Programming
See All in Programming
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
1
350
Let's Take a Peek at PHP Parser 5.x!
inouehi
0
100
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
ニックトレイン登壇資料
ryotakurokawa
0
140
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
150
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
130
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
3
700
ローコードサービスの進化のためのモノレポ移行
taro28
1
340
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
200
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.8k
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
510
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
480
The Pragmatic Product Professional
lauravandoore
33
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What's in a price? How to price your products and services
michaelherold
245
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Code Review Best Practice
trishagee
67
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Guia do f12 Developer Tools F12 Leonardo Tegon
Desenvolver Visualizar e editar o HTML, CSS e JavaScript Gerenciar
os dados locais (Cookies, Local Storage) Simular dispositivos mobile
Debugar Smartphone com Android JavaScript snippets Código minificado Breakpoints Console
Analisar Performance Tempo de carregamento Uso de CPU Uso de
memória
Painéis
Elements Visualização e alteração do layout da página e manipulação
do DOM (Document Object Model) em tempo real.
Network Análise de todas as requisições feitas pela página: tempo
tamanho headers cookies parâmetros
Sources Visualizar e alterar os arquivos (HTML, CSS, JS) da
página. Possui também um debugger.
Timeline Exibe as operações que o navegador executou durante um
determinado período de tempo. Pode ser útil para melhorar o desempenho da página.
Resources Permite a visualização de todos os arquivos utilizados pela
página e o gerenciamento dos dados locais (Cookies, Local Storage, IndexedDB).
Profiles Similar ao painel Timeline, porém com mais detalhes, como
uso de memória e CPU.
Console Contém toda a saída de log da aplicação, e
também funciona como um REPL. Possui autocomplete para nomes de funções e variáveis.
Comandos
$_ Retorna a última expressão executada no Console.
$0 - $4 Histórico dos últimos elementos selecionados no painel
Elements ou no painel Profiles
$(seletor) Retorna o primeiro elemento correspondente ao seletor CSS informado
$$(seletor) Retorna um array com os elementos correspondentes ao seletor
CSS informado
$x(path) Retorna um array com os elementos correspondentes a expressão
informada XPath
clear() Limpa o histórico do Console copy(objeto) Copia o objeto
em formato de texto para a área de transferência debug(função) Quando a função informada for executada, o debugger será aberto no painel Sources, similar a um breakpoint. Use undebug(função) para parar de debugar.
dir(elemento) Exibe o elemento em forma de objeto, listando todas
as suas propriedades
getEventListeners(elemento) Retorna as funções que estão escutando eventos no elemento
keys(objeto) Retorna um array com os nomes das propriedades do
objeto
values(objeto) Retorna um array com os valores das propriedades do
objeto
monitor(função) Quando a função informada for executada, uma mensagem será
exibida no Console com o nome dela e os valores de seus argumentos. Use unmonitor(função) para parar de monitorar.
monitorEvents(el[,eventos]) Exibe uma mensagem no Console quando ocorrerem os eventos.
Use unmonitorEvents(el[,eventos]) para parar de monitorar.
profile(nome)/profileEnd(nome) Executa uma análise de uso de CPU e ao
completar, a mesma fica no painel Profiles
table(objetos[,cabeçalhos]) Exibe os objetos no Console em formato de tabela.
Cabeçalhos podem ser informados para as colunas.
Debugar smartphone com Android
Requisitos Chrome 32+ Cabo USB Android 4.0+
Requisitos A versão do Chrome do Desktop deve ser mais
recente que a do Chrome do Android
Requisitos A partir da versão 4.2 do Android, as opções
do desenvolvedor estão escondidas por padrão
Requisitos Caso ainda não tenha, instale os do seu Android
em sua máquina drivers
Ative modo Desenvolvedor Em configurações, selecione "Sobre o telefone" e
clique sobre "Número da versão" sete vezes
Configure o Android Em seu Android, vá até configurações e
selecione "Programador" (em algumas versões será "Opções do Desenvolvedor").
Configure o Android Nas opções do desenvolvedor, ative a "Depuração
USB". Clique em OK
Conecte o Android Com o Android conectado na sua máquina
com um cabo USB, abra uma aba do Chrome com a url: e marque o checkbox "Discover USB devices" chrome://inspect
Conecte o Android No Android, permita a depuração via USB
clicando em OK. Marque o checkbox caso deseje sempre permitir a depuração para seu computador.
Selecione uma página Em , selecione uma página - que
está aberta no Chrome do Android - e clique em inspect chrome://inspect/#devices
Pronto! Selecione e altere alguns elementos, e veja como eles
mudam diretamente no Android.
Pronto! Selecione o ícone do smartphone para fazer um screencast
para a tela do PC
Links https://developers.google.com/web/tools/ chrome-devtools/ https://developers.google.com/web/tools/ chrome-devtools/debug/command- line/command-line-reference http://devtoolstips.com/ https://umaar.com/dev-tips/
Quem seguir @aerotwist @addyosmani @paul_irish @ChromeDevTools @ChromiumDev
Obrigado :) tegon.github.io/guia-do-f12/slides.pdf Leonardo Tegon