• Главная
  • Карта сайта
Не найдено

Usamos o Chrome DevTools como

  1. Editar rapidamente elementos HTML
  2. Expandir todos os elementos filhos
  3. Relocação do inspetor
  4. Pesquisa de elemento DOM
  5. Paletas
  6. Vários cursores
  7. Codificar imagem base64
  8. Comutação de pseudo-classe
  9. Seleção de colunas
  10. Copiar pedido para cURL
  11. Teclado na tela
  12. Captura de tela da página inteira
  13. Emulação de dispositivos de toque
  14. Recursos úteis

Como o nome indica, o Chrome DevTools, ou inspetor da web, é uma ferramenta projetada para desenvolvedores da Web e pessoas associadas a ele. O inspetor da web permite que você faça o seguinte:

  • Inspecione a exatidão do visor.
  • Acompanhe a execução de scripts em JavaScript.
  • Ver atividades de rede.

Ao escrever este artigo eu usei Canário - versão do Chrome, em que os novos recursos são testados e, em seguida, se enquadram em uma versão estável do Chrome.

Para iniciar o inspetor, você pode clicar com o botão direito do mouse em qualquer lugar da página e selecionar "Visualizar código do item". Você também pode pressionar Ctrl + Shift + C.

Editar rapidamente elementos HTML

Vamos começar com o mais simples: editar elementos.

Vamos começar com o mais simples: editar elementos

Como verificar:

  • Selecione a guia Elementos.
  • Selecione qualquer elemento HTML dentro do painel.
  • Clique duas vezes na tag e altere, por exemplo, o nome da tag.

Quando a edição estiver concluída, a tag de fechamento será atualizada automaticamente.

Expandir todos os elementos filhos

Como verificar:

  • Vá para o painel Elementos.
  • Selecione um elemento e, mantendo pressionada a tecla Alt, clique na seta à esquerda do elemento.

Relocação do inspetor

O painel do inspetor pode ser pressionado na parte inferior da janela do navegador e no lado direito. Por exemplo, a localização do painel à direita é conveniente quando se trabalha em monitores widescreen. Além disso, o painel do inspetor pode ser colocado em uma janela separada e, por exemplo, transferido para outro monitor.

Além disso, o painel do inspetor pode ser colocado em uma janela separada e, por exemplo, transferido para outro monitor

Como verificar:

  • Ctrl + Shift + D - alternar localização

Pesquisa de elemento DOM

Provavelmente não são muitos para os quais isso será uma descoberta, mas na guia "Elementos" você pode pesquisar por DOM.

Provavelmente não são muitos para os quais isso será uma descoberta, mas na guia Elementos você pode pesquisar por DOM

Como verificar:

  • Pressione Ctrl + F e insira a consulta de pesquisa proposta.

Paletas

Selecione a cor da paleta

A escolha da cor nas versões recentes do Chrome sofreu algumas alterações: adicionamos duas paletas para facilitar a escolha da cor.

Vários cursores

Mova o cursor e, enquanto mantém pressionada a tecla Ctrl, clique na área desejada para adicionar um cursor. Você pode desfazer a ação usando Ctrl + U. Pessoalmente, nunca fui útil.

Codificar imagem base64

Como verificar:

  • Alterne para o painel Rede.
  • Selecione a imagem
  • Clique com o botão direito na imagem e selecione ""

Comutação de pseudo-classe

Pseudo-classes refletem o estado dos elementos e suas posições relativas.

Pseudo-classes refletem o estado dos elementos e suas posições relativas

Como verificar:

  • Clique com o botão direito do mouse em um elemento no painel Elementos e selecione uma pseudo classe na lista Estado do Elemento de Força.
  • Você também pode selecionar uma pseudo-classe no lado direito do painel Elementos.

Seleção de colunas

Como verificar:

  • Vá para o painel "Fontes".
  • Selecione qualquer arquivo.
  • Selecione o texto pressionando Alt.

A seleção de uma coluna também funciona quando o HTML é editado no painel Elementos.

Copiar pedido para cURL

Qualquer solicitação na guia Rede pode ser copiada e colada no terminal para execução usando curl.

Teclado na tela

Se o perfil do Nexus 5X estiver selecionado, você poderá ver a aparência do site quando o teclado na tela estiver ativo.

DevTools do Chrome: teclado virtual DevTools do Chrome: teclado virtual

Captura de tela da página inteira

Tirar uma foto da página inteira é muito simples. Só precisa ...

  1. Abra o inspetor.
  2. Vá para o console.
  3. Pressione Ctrl + Shift + P
  4. Digite "captura de tela"
  5. Selecione "Capturar captura de tela inteira"
Captura de tela da página inteira

Emulação de dispositivos de toque

Você também pode simular alguns sensores:

  • Tela sensível ao toque
  • Coordenadas para geolocalização
  • Acelerômetro

Como tentar:

  • Selecione o painel Elementos.
  • Pressione "Esc" e selecione "Emulação> Sensores".

Recursos úteis

chaves e valores

As funções de chaves e valores permitem que você emita as chaves ou valores do objeto para o console, respectivamente. As funções de chaves e valores permitem que você emita as chaves ou valores do objeto para o console, respectivamente Exibindo chaves e valores de objeto separadamente

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью