Raio frontendizador

10 dicas rápidas para quem usa chrome (ou chromium) no desenvolvimento front end.

Imagem de exibição para "10 dicas rápidas para quem usa chrome (ou chromium) no desenvolvimento front end."

Olá, frontaiada! Venho com uma lista de 10 dicas para quem usa o chrome (ou chromium) para desenvolvimento front end.

Todas essas dicas fazem parte do meu processo de desenvolvimento. Vamos lá:

  1. Use o “console.table()” para logar objetos javascript em formato de tabela
  2. Buscar por seletores css ou xpath na aba ‘Elements’
  3. Logue por seletores xpath direto na aba ‘Console’ usando a função $x()
  4. Exiba as chamadas ajax no ‘Console’ em tempo real
  5. Descubra vários formatos de uma cor na aba Elements
  6. Para quem gosta do Sublime. Atalho CTRL +P ‘Go to anything’
  7. Outra para ‘sublimeiros’. Cursores múltiplos na aba ‘Sources’
  8. Simule pseudo-classes css na aba ‘Elements’.
  9. Expandir seletores css declarados como short hand
  10. ‘Copy as cURL’ dentro da aba ‘Networks’.
  11. Quer mais dicas, né? Veja as fontes aqui

1 . Use o console.table() para logar objetos javascript em formato de tabela.

Se você tem um vetor cheio de objetos para logar, com certeza seria mais prático logar esses objetos em um formato de tabela, certo?

Fazer isso é fácil! Use o comando console.table() passando seu vetor como argumento e seja feliz.

Exemplo console.table(sites) :

function Site(nome, url){
    this.nome = nome;
    this.url = url;  
}
var sites = [];
var siteDoTeles = new Site('Raio Frontendizador','http://jotateles.com.br');
var github = new Site('Github','https://www;github.com');
var siteDoWillian = new Site('Willian Ribeiro','http://willianribeiro.com.br');
sites.push(siteDoTeles, github, siteDoWillian);

console.table(sites);

Exemplo

2. Buscar por seletores css ou xpath na aba ‘Elements’

Normalmente procuramos na aba ‘Elements’ por strings visíveis na tela ou nome de elementos html, mas o que nem todo mundo sabe é que dá para buscar por seletores css e xpath também!

Exemplo buscando por seletor css:

Encontre os links desse post procurando pelo seletor css .raio-body .raio-post a.

Exemplo

Encontre buscando por seletor xpath:

Encontre as datas dos posts do blog buscando por //div[@class='raio-post-info']//span[@class='raio-post-date']/text():

Exemplo

3. Logue por seletores xpath direto na aba ‘Console’ usando a função $x():

Uma boa alternativa para logar elementos do DOM no console é utilizar a função $x(); A função $x(), recebe dois parametros, o primeiro é o seletor xpath e o segundo o contexto onde ele será buscado (opcional);

Exemplo de uso $x('//article')

Encontre os artigos do blog na aba console buscando por $x('//article'):

Article

Isso mesmo, esse é mais um motivo para você não precisar do jQuery para selecionar elementos do dom facilmente no console.

4 . Exiba as chamadas ajax no ‘Console’ em tempo real

Essa é muito útil!

Logue as chamadas ajax em tempo real no seu console apenas checando uma opção nas preferências do seu chrome:

  1. Clique em ‘settings’;
  2. Desça até ‘General > Console’;
  3. Cheque Log XMLHTTPRequests;
  4. Pronto, olha como fica:

Fica

Acima um exemplo de um templateUrl do angularjs sendo logado.

Isso

E aqui uma visualização das chamadas GET e POST da url http://dontpad.com/testeblog durante alguns segundos.

5 . Descubra vários formatos de uma cor na aba Elements

Essa é bastante conhecida. Quando você ver uma cor na aba ‘Styles’ dentro de ‘Elements’, clique na cor segurando a tecla shift. Você vai alternar entre as diferentes formas de escrever essa cor, RGB, hexadecimal, HSL, nome web (caso exista).

COR

6. Para quem gosta do Sublime. Atalho CTRL +P ‘Go to anything’:

Acostumado com o ‘ctrl + p’ do sublime para abrir um arquivo novo, né? Use o mesmo ‘ctrl + p’ na aba ‘Source’ para pular para um dos arquivos carregados na sua página atual.

Use ‘ctrl + sift + p’ para buscar por um seletor css ou função javascript!

Vai

7. Outra para ‘sublimeiros’. Cursores múltiplos na aba ‘Sources’:

Essa é bem simples. Você pode fazer múltiplas seleções na aba ‘Sources’, simplesmente deixando o ‘ctrl’ pressionado enquant clica nas seleções desejadas.

Exemplo

8. Simule pseudo-classes css na aba ‘Elements’.

Não sabe como testar se a propriedade que você escreveu para o estado :hover de um elemento ficou legal sem mover seu mouse para longe do elemento?

Fácil. Na aba ‘Styles’ dentro de ‘Elements’ existe uma opção para simular esses estados.

Exemplo

9. Expandir seletores css declarados como short hand

Na aba ‘Elements’, em ‘Styles’, clique na setinha antes do valor de um atributo css declarado como shorthand para expandir sua visualização e ver todas os valores de atributos que foram definidos internamente na declaração.

10. ‘Copy as cURL’ dentro da aba ‘Networks’.

Bem interessante para testar as chamadas que estão sendo feitas na aba ‘Networks’.

Na aba ‘Networks’ selecione um item, clique com o botão direito e depois em ‘Copy as cURL’. Você copiará para área de transferência algo do tipo:

curl 'http://jotateles.com.br/jmveiculos/js/lib/angular.min.js' -H 
'Pragma: no-cache' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-   
Language: pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4,nb;q=0.2,fr;q=0.2' -H 'User-
Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/43.0.2357.81 Safari/537.36' -H 'Accept: */*' -H 'Referer: 
http://jotateles.com.br/jmveiculos/' -H 'Cookie: 
_hjUserId=daf385ee-892f-480e-81e7-10ee5c9f8aee; _hjIncludedInSample=1' -H 
'Connection: keep-alive' -H 'Cache-Control: no-cache' --compressed

Que pode ser usado direto no console do seu sistema operacional para fazer uma chamadas curl para o arquivo selecionado usando todas as configurações do seu navegador!

Exemplo

11. Quer mais dicas, né? Veja as fontes aqui:

Bem, utilizo várias dessas dicas no meu dia a dia a algum tempo, algumas a mais de ano, outras mais recentemente descobrí em alguns sites, como esses que cito abaixo:

E finalmente meus agradecimentos ao amigo desenvolvedor front end Willian Ribeiro pela ajuda na escrita do post!

Abraços