http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Nous utilisons Chrome DevTools comme sur

  1. Modifier rapidement des éléments HTML
  2. Développer tous les éléments enfants
  3. Relocalisation de l'inspecteur
  4. Recherche d'élément DOM
  5. Palettes
  6. Plusieurs curseurs
  7. Encoder l'image base64
  8. Commutation de pseudo-classe
  9. Sélection de colonne
  10. Demande de copie pour cURL
  11. Clavier à l'écran
  12. Capture d'écran de la page entière
  13. Emulation d'appareils tactiles
  14. Caractéristiques utiles

Comme son nom l’indique, Chrome DevTools, ou inspecteur Web, est un outil conçu à l’intention des développeurs Web et des personnes qui lui sont associées. L'inspecteur Web vous permet d'effectuer les opérations suivantes:

  • Vérifiez l'exactitude de l'affichage.
  • Suivre l'exécution des scripts en JavaScript.
  • Voir les activités du réseau.

En écrivant cet article j'ai utilisé Canaries - la version de Chrome, où les nouvelles fonctionnalités sont testées, qui tombent ensuite dans une version stable de Chrome.

Pour lancer l'inspecteur, vous pouvez cliquer avec le bouton droit n'importe où sur la page et sélectionner "Afficher le code de l'article". Vous pouvez également appuyer simplement sur Ctrl + Maj + C.

Modifier rapidement des éléments HTML

Commençons par le plus simple: l'édition d'éléments.

Commençons par le plus simple: l'édition d'éléments

Comment vérifier:

  • Sélectionnez l'onglet Eléments.
  • Sélectionnez n'importe quel élément HTML à l'intérieur du panneau.
  • Double-cliquez sur la balise et modifiez, par exemple, le nom de la balise.

Lorsque l'édition est terminée, la balise de fermeture sera automatiquement mise à jour.

Développer tous les éléments enfants

Comment vérifier:

  • Accédez au panneau Eléments.
  • Sélectionnez un élément et, tout en maintenant la touche Alt enfoncée, cliquez sur la flèche située à gauche de l'élément.

Relocalisation de l'inspecteur

Vous pouvez appuyer sur le panneau d’inspecteur en bas de la fenêtre du navigateur et à droite. Par exemple, l'emplacement du panneau sur la droite est pratique lorsque vous travaillez sur des moniteurs à écran large. En outre, le panneau d'inspection peut être placé dans une fenêtre séparée et, par exemple, transféré vers un autre moniteur.

En outre, le panneau d'inspection peut être placé dans une fenêtre séparée et, par exemple, transféré vers un autre moniteur

Comment vérifier:

  • Ctrl + Maj + D - Basculer la position

Recherche d'élément DOM

Probablement pas beaucoup pour qui ce sera une découverte, mais dans l'onglet "Eléments" vous pouvez rechercher par DOM.

Probablement pas beaucoup pour qui ce sera une découverte, mais dans l'onglet Eléments vous pouvez rechercher par DOM

Comment vérifier:

  • Appuyez sur Ctrl + F et entrez la requête de recherche proposée.

Palettes

Choisir la couleur de la palette

Le choix de couleur dans les versions récentes de Chrome a subi quelques modifications: deux palettes ont été ajoutées pour faciliter le choix de la couleur.

Plusieurs curseurs

Déplacez le curseur et, tout en maintenant la touche Ctrl enfoncée, cliquez dans la zone souhaitée pour ajouter un curseur. Vous pouvez annuler l'action à l'aide de Ctrl + U. Personnellement, je n'ai jamais été utile.

Encoder l'image base64

Comment vérifier:

  • Basculez vers le panneau Réseau.
  • Sélectionnez une image
  • Faites un clic droit sur l'image et sélectionnez ""

Commutation de pseudo-classe

Les pseudo-classes reflètent l'état des éléments et leurs positions relatives.

Les pseudo-classes reflètent l'état des éléments et leurs positions relatives

Comment vérifier:

  • Cliquez avec le bouton droit de la souris sur un élément du panneau Eléments et sélectionnez une pseudo-classe dans la liste Forcer le statut d'un élément.
  • Vous pouvez également sélectionner une pseudo-classe à droite du panneau Éléments.

Sélection de colonne

Comment vérifier:

  • Allez dans le panneau "Sources".
  • Sélectionnez n'importe quel fichier.
  • Sélectionnez le texte en maintenant Alt.

La sélection d'une colonne fonctionne également lorsque HTML est modifié dans le panneau Éléments.

Demande de copie pour cURL

Toute demande de l'onglet Réseau peut être copiée puis collée dans le terminal pour être exécutée à l'aide de curl.

Clavier à l'écran

Si le profil Nexus 5X est sélectionné, vous pouvez voir à quoi ressemble le site lorsque le clavier à l'écran est actif.

Chrome DevTools: Clavier visuel Chrome DevTools: Clavier visuel

Capture d'écran de la page entière

Prendre une photo de la page entière est très simple. Juste besoin ...

  1. Inspecteur ouvert.
  2. Allez à la console.
  3. Appuyez sur Ctrl + Maj + P
  4. Tapez "screenshot"
  5. Sélectionnez "Capture d'écran en taille réelle"
Capture d'écran de la page entière

Emulation d'appareils tactiles

Vous pouvez également simuler certains capteurs:

  • Écran tactile
  • Coordonnées de géolocalisation
  • Accéléromètre

Comment essayer:

  • Sélectionnez le panneau Eléments.
  • Appuyez sur "Echap" et sélectionnez "Emulation> Capteurs".

Caractéristiques utiles

clés et valeurs

Les fonctions clés et valeurs vous permettent de sortir les clés ou les valeurs de l'objet sur la console, respectivement. Les fonctions clés et valeurs vous permettent de sortir les clés ou les valeurs de l'objet sur la console, respectivement Affichage des clés et des valeurs d'objet séparément

Карта