JavaScript – Sie müssen unbedingt die Dev-Tools-Tricks kennen

Hallo euch alle und willkommen zurück zu einem weiteren Tag der Arbeit an Wes Bos‘ JavaScript30! Die heutige Herausforderung war alles andere als eine Herausforderung. Heute war nur ein Blick auf einige (wahrscheinlich ... 14) verschiedene Entwicklertool-Tricks. Im Gegensatz zu seinem Array-Cardio mussten wir hier eigentlich nichts weiter tun, als nur zuzusehen, wie er uns verschiedene Arten der Interaktion mit der Konsole zeigte. Ich war wirklich ziemlich aufgeregt, das zu sehen, da ich vor ein paar Wochen fast den Verstand verloren hätte, als ich sah, wie er in einem früheren Video console.table() benutzte. Ich weiß nicht, warum mir nicht klar war, dass es viele verschiedene Möglichkeiten gibt, mit der Konsole zu interagieren, aber ich war damals völlig verblüfft.

Bevor Wes überhaupt mit verschiedenen Konsolenbefehlen arbeitete, zeigte er als Erstes, wie man eine JavaScript-Funktion in verschiedene Aktionen (Teilbaumänderungen, Attributänderungen oder Knotenentfernung) aufschlüsselt und dann die Codezeile anzeigt, die sich auf die Änderung auswirkt die Seite. Dies scheint eine ziemlich coole Möglichkeit zu sein, verschiedene Aspekte von Websites aufzuschlüsseln, um genau zu sehen, wie sie JavaScript für die Interaktivität verwenden. Sie können sehen, wie bestimmte Änderungen codiert wurden, und die Änderung anhalten, bevor sie erfolgt. Na ja...zumindest war das meine Erkenntnis daraus.

    // 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')

Im nächsten Teil wurden verschiedene Aktionen und Befehle behandelt, die Sie in der Konsole verwenden können. Ich bin mir nicht ganz sicher, wann Sie eines davon verwenden müssten ... aber das bedeutet nicht, dass es nicht interessant ist. Zum Beispiel: Ich wusste nicht, dass man den Text in der Konsole selbst formatieren kann ... es ist etwas unnötig, aber ich finde, es sieht cool aus. Das Gleiche gilt für den Aufruf der Warn-/Fehler-/Infomeldungen. Ja, es ist ziemlich interessant, es zu tun. Aber warum Sie das tun sollten, verstehe ich nicht (abgesehen davon, dass Sie möglicherweise ein textbasiertes Spiel in der Konsole erstellen).

Dann haben wir besprochen, wie wir mit console.assert() testen können, ob ein Teil des Dokuments eine bestimmte Klasse enthält. Dies kann auch verwendet werden, um zu testen, ob etwas im Dokument wahr oder falsch ist. Wenn es falsch ist, kann/wird es Ihre eigene Fehlermeldung anzeigen. Dann haben wir kurz besprochen, wie man die Konsole mit console.clear() löscht, was beim Aufräumen hilft. Dies kann auch nützlich sein, wenn Sie in Ihrem Dokument mehrere verschiedene Konsolenbefehle haben und es ganz am Ende bereinigen möchten. Dies könnte Sie davon abhalten, die ganze Sache durchzugehen und jeden einzelnen Konsolenbefehl bis zu diesem Punkt herauszunehmen oder auskommentieren zu müssen.

    // 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)
      })

Im weiteren Verlauf haben wir uns auch mit console.dir() befasst, mit dem Sie die Dom-Elemente eines bestimmten Dings anzeigen können. Es gibt so viele Teile davon, die ich nicht erkenne oder verstehe, aber ich kann mir vorstellen, dass das mit der Zeit kommen wird. Ich denke, dass der Befehl console.group() derzeit für mich mehr Verwendungsmöglichkeiten bietet. Allein die Tatsache, dass Sie Informationen nach Objekt oder Array speichern lassen können und deren Informationen erscheinen sehr hilfreich. Manchmal kann der Rohcode für Arrays oder Objekte innerhalb von Arrays überwältigend sein, aber dadurch werden die Informationen automatisch organisiert. Eigentlich ist es ziemlich cool.

Die letzten beiden Teile der Lektion befassten sich mit console.count() und console.time(), die ebenfalls spezifische Anwendungsfälle zu sein scheinen, die ich meiner Meinung nach nicht benötigen werde. Die Zählfunktion ist irgendwie cool, da man sehen kann, wie oft auf ein bestimmtes Wort/eine bestimmte Phrase verwiesen wird. Es war nicht ganz klar, ob darauf nur innerhalb der Konsole oder für das gesamte Dokument verwiesen wurde, aber es scheint, als wäre es nur innerhalb der Konsole der Fall. console.time() scheint veraltet zu sein. Ich sage das, weil es viele verschiedene Möglichkeiten gibt, zu sehen, wie schnell Sie Daten von einer anderen Quelle erhalten. Sei es durch das Laden eines anderen Elements von einer bestimmten Website oder durch den Besuch einer Website selbst. Es gibt viele Möglichkeiten zu sehen, wie schnell Dinge geladen werden, aber ich denke, es macht Sinn, dies auch in der Konsole tun zu können.

Ich denke, das deckt im Grunde die heutige Lektion ab. Es war nicht sehr aufregend, aber informativ. In Zukunft werde ich vielleicht einige dieser Befehle verwenden, aber im Moment freue ich mich einfach über andere Möglichkeiten, die Konsole zu verwenden, weil ich neugierig war, seit ich ihn zum ersten Mal gesehen habe, wie er console.table() so lässig verwendet, dass ich jetzt noch darüber nachdenke . Nun... das war's für heute! Bitte kommen Sie bald wieder vorbei, um Folgendes zu sehen: JavaScript 30 - 10 Halten Sie die Umschalttaste gedrückt, um mehrere Kontrollkästchen zu aktivieren!

Das obige ist der detaillierte Inhalt vonJavaScript – Sie müssen unbedingt die Dev-Tools-Tricks kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!