Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Nouveautés de DevTools (Chrome 65)

Powered by Google Translate

Les nouvelles fonctionnalités de DevTools dans Chrome 65 incluent:

Lisez la suite ou regardez la version vidéo de ces notes de publication ci-dessous.

local remplace

** Les remplacements locaux ** vous permettent d'apporter des modifications à DevTools et de les conserver tout au long du chargement des pages. Auparavant, toute modification apportée dans DevTools était perdue lorsque vous rechargiez la page. ** Les substitutions locales ** fonctionnent pour la plupart des types de fichiers, à quelques exceptions près. Voir Limitations .

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

Comment ça marche:

  • Vous spécifiez un répertoire dans lequel DevTools doit enregistrer les modifications.
  • Lorsque vous apportez des modifications dans DevTools, DevTools enregistre une copie du fichier modifié dans votre répertoire.
  • Lorsque vous rechargez la page, DevTools sert le fichier modifié local plutôt que la ressource réseau.

Pour configurer les ** dérogations locales **:

  1. Ouvrez le panneau ** Sources **. 1. Ouvrez l'onglet ** Remplacements **.

    The Overrides tab
    Figure 2. The Overrides tab

  2. Cliquez sur ** Setup Overrides **. 1. Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications. 1. En haut de la fenêtre, cliquez sur ** Autoriser ** pour donner à DevTools un accès en lecture et en écriture au répertoire. 1. Faites vos changements.

Limitations

  • DevTools n'enregistre pas les modifications apportées dans l'arborescence ** DOM ** du panneau ** Elements **. Modifiez le code HTML dans le panneau ** Sources ** à la place.
  • Si vous modifiez CSS dans le volet ** Styles ** et que la source de ce CSS est un fichier HTML, DevTools n'enregistrera pas le changement. Modifiez le fichier HTML dans le panneau ** Sources ** à la place.
  • Workspaces . DevTools mappe automatiquement les ressources réseau sur un référentiel local. Chaque fois que vous apportez une modification à DevTools, cette modification est également enregistrée dans votre référentiel local.

L'onglet Modifications

Suivez les modifications que vous apportez localement dans DevTools via le nouvel onglet ** Modifications **.

The Changes tab
Figure 3. The Changes tab

Nouveaux outils d'accessibilité

Utilisez le nouveau volet ** Accessibilité ** pour examiner les propriétés d'accessibilité d'un élément, ainsi que le rapport de contraste des éléments de texte du ** Sélecteur de couleurs ** pour vous assurer qu'ils sont accessibles aux utilisateurs malvoyants ou aux couleurs dégradées. déficiences de la vision.

Volet d'accessibilité

Utilisez le volet ** Accessibilité ** du panneau ** Eléments ** pour examiner les propriétés d'accessibilité de l'élément actuellement sélectionné.

The Accessibility pane shows the ARIA attributes and computed
            properties for the element that's currently selected in the DOM Tree of
            the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Consultez l'étiquette A11ycast de Rob Dodson sur l'étiquetage ci-dessous pour voir le volet ** Accessibility ** en action.

Rapport de contraste dans le sélecteur de couleurs

Le Color Picker vous montre maintenant le rapport de contraste des éléments de texte. L'augmentation du rapport de contraste des éléments de texte rend votre site plus accessible aux utilisateurs malvoyants ou souffrant de troubles de la vision des couleurs. Voir Color and contrast pour en savoir plus sur l' Color and contrast du rapport de contraste sur l'accessibilité.

L'amélioration du contraste des couleurs de vos éléments de texte rend votre site plus utilisable par tous les utilisateurs. En d'autres termes, si votre texte est gris avec un arrière-plan blanc, il est difficile à lire pour quiconque.

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

Dans ** Figure 5 **, les deux cases à cocher à côté de ** 4.61 ** signifient que cet élément est conforme à enhanced recommended contrast ratio (AAA) . S'il n'y avait qu'une coche, cela signifierait qu'il a rencontré le minimum recommended contrast ratio (AA) .

Cliquez sur ** Afficher plus **! Show More pour développer la section ** Contrast Ratio **. La ligne blanche dans la zone ** Color Spectrum ** (Spectre de couleurs **) représente la limite entre les couleurs conformes au rapport de contraste recommandé et celles qui ne le sont pas. Par exemple, depuis la couleur grise dans ** La figure 6 ** correspond aux recommandations. Cela signifie que toutes les couleurs situées au-dessous de la ligne blanche sont également conformes aux recommandations.

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

Le panneau ** Audits ** dispose d’un audit d’accessibilité automatisé pour garantir que * chaque * élément de texte d'une page a un rapport de contraste suffisant.

Voir Run Lighthouse in Chrome DevTools , ou regardez le A11ycast ci-dessous, pour apprendre à utiliser le panneau ** Audits ** pour tester l'accessibilité.

Nouveaux audits

Chrome 65 est livré avec une toute nouvelle catégorie d'audits de référencement et de nombreux nouveaux audits de performance.

Nouveaux audits de référencement

En vous assurant que vos pages réussissent chacune des vérifications de la nouvelle catégorie ** SEO **, vous pourrez améliorer votre classement dans les moteurs de recherche.

The new SEO category of audits.
Figure 7. The new SEO category of audits

Nouveaux audits de performance

Chrome 65 est également livré avec de nombreux nouveaux audits de performance:

  • Le temps de démarrage de JavaScript est élevé
  • Utilise une politique de cache inefficace sur les actifs statiques
  • Évite les redirections de page
  • Le document utilise des plugins
  • Minify CSS
  • Minify JavaScript

Autres mises à jour

Code pas à pas fiable avec les opérateurs et code asynchrone

Chrome 65 apporte les mises à jour du ** Step Into **! Step Into bouton Step Into lors de l’application du code qui transmet des messages entre les threads et du code asynchrone. Si vous voulez le comportement de pas précédent, vous pouvez utiliser le nouveau ** Step **! Step , à la place.

dans le code qui transmet les messages entre les threads

Lorsque vous entrez dans le code qui transmet les messages entre les threads, DevTools vous montre maintenant ce qui se passe dans chaque thread.

Par exemple, l’application de la Figure 8 ** transmet un message entre le fil principal et le fil de travail. Après être intervenu dans l'appel postMessage() sur le thread principal, DevTools s'interrompt dans le gestionnaire onmessage du thread de travail. Le gestionnaire onmessage lui-même poste un message dans le thread principal. Entrer dans * cet * appel met en pause DevTools dans le thread principal.

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

Lorsque vous êtes entré dans un code comme celui-ci dans les versions précédentes de Chrome, Chrome ne vous montrait que le côté thread principal du code, comme vous pouvez le voir sur la ** figure 9 **.

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

au code asynchrone

Lorsque vous entrez dans le code asynchrone, DevTools suppose maintenant que vous souhaitez suspendre le code asynchrone qui s'exécute.

Par exemple, dans la ** figure 10 **, après avoir setTimeout() à setTimeout() , DevTools exécute tout le code menant jusque-là à l'arrière-plan, puis met en pause la fonction transmise à setTimeout() .

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

Lorsque vous êtes entré dans un code comme celui-ci dans Chrome 63, DevTools a interrompu la lecture du code chronologiquement, comme vous pouvez le voir sur la ** figure 11 **.

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

Plusieurs enregistrements dans le panneau Performances

Le panneau ** Performance ** vous permet maintenant de sauvegarder temporairement jusqu'à 5 enregistrements. Les enregistrements sont supprimés lorsque vous fermez la fenêtre de DevTools. Voir Get Started with Analyzing Runtime Performance pour vous familiariser avec le panneau ** Performance **.

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

Bonus ## : automatiser les actions de DevTools avec Puppeteer 1.0

La version 1.0 de Puppeteer, un outil d'automatisation de navigation géré par l'équipe de Chrome DevTools, est maintenant disponible. Vous pouvez utiliser Puppeteer pour automatiser de nombreuses tâches auparavant uniquement disponibles via DevTools, telles que la capture de captures d'écran:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Il dispose également d’API pour de nombreuses tâches d’automatisation généralement utiles, telles que la génération de PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Voir Quick Start pour en savoir plus.

Vous pouvez également utiliser Puppeteer pour exposer les fonctionnalités de DevTools lors de la navigation sans jamais ouvrir explicitement DevTools. Voir Using DevTools Features Without Opening DevTools pour un exemple.

Une demande de l'équipe de DevTools: considérez Canary

Si vous utilisez un ordinateur Mac ou Windows, envisagez d'utiliser Chrome Canary comme navigateur de développement par défaut. Si vous signalez un bogue ou une modification que vous n'aimez pas tant qu'il est encore dans Canary, l'équipe de DevTools peut traiter vos commentaires beaucoup plus rapidement.

Commentaires

Le meilleur endroit pour discuter des fonctionnalités ou des modifications que vous voyez ici est le google-chrome-developer-tools@googlegroups.com mailing list . Vous pouvez également nous @ChromeDevTools si le temps vous manque. Si vous êtes sûr d’avoir rencontré un bogue dans DevTools, veuillez open an issue .

Voir la balise devtools-whatsnew pour des liens vers toutes les notes de publication précédentes de DevTools.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!