JavaScript - il faut connaître les astuces des outils de développement

Bonjour à tous et bienvenue pour une autre journée de travail sur le JavaScript30 de Wes Bos ! Le défi d'aujourd'hui était tout sauf un défi. Aujourd'hui, ce n'était qu'un aperçu de plusieurs (probablement... 14) astuces différentes liées aux outils de développement. Contrairement à son array cardio, cela ne nous a pas vraiment demandé de faire quoi que ce soit, mais simplement de le regarder pendant qu'il nous montrait différentes façons d'interagir avec la console. En fait, j'étais plutôt excité de voir cela car j'ai presque perdu la tête il y a quelques semaines lorsque je l'ai vu utiliser console.table() dans une vidéo précédente. Je ne sais pas pourquoi il n'était pas évident pour moi qu'il existe de nombreuses façons différentes d'interagir avec la console, mais j'étais absolument abasourdi à l'époque.

Avant même de travailler avec différentes commandes de console, la première chose que Wes a montrée était de savoir comment décomposer une fonction JavaScript en différentes actions (modifications de sous-arbres, modifications d'attributs ou suppression de nœuds), puis afficher la ligne de code qui affectera le changement dans la page. Cela semble être un moyen plutôt intéressant de décomposer différents aspects des sites Web pour voir exactement comment ils utilisent JavaScript pour l'interactivité. Vous pouvez voir comment ils ont codé des modifications spécifiques et suspendre la modification avant qu'elle ne se produise. Eh bien... du moins, c'est ce que j'en retiens.

    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

La partie suivante couvrait les différentes actions et commandes que vous pouvez utiliser dans la console. Je ne sais pas vraiment quand vous auriez besoin d'utiliser l'un de ces éléments... mais cela ne veut pas dire que ce n'est pas intéressant. Par exemple : je ne savais pas que vous pouviez styliser le texte dans la console elle-même... c'est un peu inutile mais je pense que ça a l'air cool. Même chose avec l'appel des messages d'avertissement/erreur/info. Ouais, c'est assez intéressant de le faire. Mais pourquoi voudriez-vous faire cela, je ne vois pas pourquoi (à part éventuellement créer un jeu textuel dans la console).

Ensuite, nous avons expliqué comment tester si une partie du document contenait une classe spécifique avec console.assert(). Cela peut également être utilisé pour tester si quelque chose est vrai ou faux dans le document. Si c'est faux, il peut afficher votre propre message d'erreur. Ensuite, nous avons rapidement expliqué comment effacer la console avec console.clear() qui aide à nettoyer les choses. Cela peut également être utile si vous disposez de plusieurs commandes de console différentes dans votre document et que vous souhaitez le nettoyer à la toute fin. Cela pourrait vous éviter d'avoir à parcourir tout le processus et à supprimer ou commenter chaque commande de la console jusqu'à ce point.

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

Nous avons également abordé console.dir() qui peut vous permettre de visualiser les éléments dom d'un élément spécifique. Il y a tellement d’aspects de cela que je ne reconnais pas ou que je ne comprends pas, mais j’imagine que cela viendra avec le temps. Je pense que la commande console.group() a plus d'utilité pour moi en ce moment. Le simple fait que vous puissiez prendre des informations, les stocker par objet ou par tableau et leurs informations semblent très utiles. Parfois, le code brut des tableaux ou des objets dans les tableaux peut être écrasant, mais cela organisera automatiquement les informations. C'est plutôt cool en fait.

Les deux dernières parties de la leçon concernaient console.count() et console.time() qui semblent également être des cas d'utilisation spécifiques dont je ne pense pas avoir besoin. La fonction de comptage est plutôt intéressante car vous pouvez voir combien de fois un mot/une phrase spécifique est référencé. Il n'était pas tout à fait clair si cela était uniquement référencé dans la console ou pour l'ensemble du document, mais il semble que ce soit uniquement dans la console. console.time() semble obsolète. Je dis cela parce qu'il existe de nombreuses façons différentes de voir à quelle vitesse vous obtenez des données provenant d'une autre source. Qu'il s'agisse de charger un élément différent à partir d'un site Web spécifique ou d'accéder à un site Web lui-même. Il existe de nombreuses façons de voir à quelle vitesse les choses se chargent, mais je suppose qu'il est logique de pouvoir le faire également dans la console.

Je suppose que cela couvre essentiellement la leçon d'aujourd'hui. Ce n'était pas très excitant mais c'était instructif. Je pourrais utiliser certaines de ces commandes à l'avenir, mais pour le moment, je suis simplement heureux de voir d'autres façons d'utiliser la console car je suis curieux depuis que je l'ai vu pour la première fois utiliser console.table() si nonchalamment que j'y pense encore maintenant. . Eh bien... c'est tout pour aujourd'hui ! Veuillez revenir bientôt pour voir : JavaScript 30 - 10 Maintenez Shift pour cocher plusieurs cases !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!