Webfejlesztőként nagyon jól ismeri a kód hibakeresésének szükségességét. Gyakran használunk külső könyvtárakat a naplókhoz, és bizonyos esetekben formázzuk és / vagy megjelenítjük őket, de böngészőink konzolja sokkal erősebb, mint gondolnánk.
Ha a konzolra gondolunk, akkor először az jut eszünkbe és az console.log, igaz? De sokkal több módszer létezik, mint amilyet elképzelünk. Most meglátjuk, hogyan lehet a legtöbbet kihozni a konzol használatából, és adok néhány tippet, hogy ezek a módszerek olvashatóbbá váljanak
Mi a konzol?
A JavaScript konzol a modern böngészők beépített szolgáltatása, amely házon kívüli fejlesztőeszközökhöz tartozik egy shell-szerű felületen. Ez lehetővé teszi a fejlesztő számára, hogy:
- Tekintse meg a weblapon előforduló hibák és figyelmeztetések naplóját.
- Javítsa a weboldalt JavaScript parancsokkal.
- Hibakeresni az alkalmazásokat, és közvetlenül a böngészőben bejárni a DOM-ot.
- Ellenőrizze és elemezze a hálózati tevékenységet
Alapvetően felhatalmazza a JavaScript írására, kezelésére és monitorozására közvetlenül a böngészőben.
Console.log, Console.error, Console.warn és Console.info
Valószínűleg ezek a leggyakrabban használt módszerek. Több paramétert is átadhat ezeknek a módszereknek. Minden paraméter kiértékelése és összefűzése a szóköz által elválasztott karakterláncban történik, de objektumok vagy tömbök esetén a tulajdonságok között navigálhat.
Console.group
Ez a módszer lehetővé teszi a console.logs sorozatainak (de a hibainformációk stb.) Csoportosítását egy összecsukható csoport alá. A szintaxis nagyon egyszerű: csak írja be az összeset console.log, amelyet csoportosítani akarunk egy console.group()(vagy console.groupCollapsed()ha azt szeretnénk, hogy alapértelmezés szerint bezáruljon) előtt. Ezután adjon egy console.groupEnd()a-t a csoport bezárásához.
Az eredmények így fognak kinézni:
Konzolasztal
Amióta felfedeztem, az console.tableéletem megváltozott. A JSON vagy nagyon nagy JSON tömbök megjelenítése a belsejében console.logfélelmetes élmény. Ez console.tablelehetővé teszi számunkra, hogy ezeket a struktúrákat egy gyönyörű táblázatban jelenítsük meg, ahol megnevezhetjük az oszlopokat és paraméterként adhatjuk át őket.
Az eredmény csodálatos és nagyon hasznos a hibakeresésben:
Console.count, Console.time és Console.timeEnd
Ez a három módszer a svájci kés minden fejlesztő számára, akinek hibakeresést kell végeznie. Az console.countszámít, és kimenetek az, hogy hányszor count()már felhozták ugyanazon a vonalon és ugyanazon a címkén. Az console.timeindító elindítja a bemeneti paraméterként megadott nevű időzítőt, és akár 10 000 egyidejű időzítőt is képes futtatni egy adott oldalon. Miután elindítottuk, hívást használunk console.timeEndaz időzítő leállítására és az eltelt idő nyomtatására a konzolra.
A kimenet a következőképpen fog kinézni:
Console.trace és Console.assert
Ezek a módszerek egyszerűen kinyomtatják a verem nyomát onnan, ahova hívták. Képzelje el, hogy JS könyvtárat hoz létre, és tájékoztatni szeretné a felhasználót a hiba keletkezésének helyéről. Ebben az esetben ezek a módszerek nagyon hasznosak lehetnek. Az console.assertolyan, mint a, console.tracede csak akkor nyomtat, ha az átadott feltétel nem teljesült.
Mint láthatjuk, a kimenet pontosan az, amit a React (vagy bármely más könyvtár) megmutatna nekünk, amikor kivételt generálunk.
Törli az összes konzolt?
A konzolok használata gyakran arra kényszerít bennünket, hogy megszüntessük azokat. Vagy néha megfeledkezünk a termelés felépítéséről (és csak tévedésből vesszük észre őket napokkal és napokkal később). Természetesen senkinek nem tanácsolom, hogy visszaéljen a konzolokkal, ahol nincs rájuk szükség (a változásbeviteli fogantyú konzolja törölhető, miután látta, hogy működik). A hibakeresést és a nyomkövetési naplókat fejlesztési módban kell hagynia a hibakereséshez. Nagyon sokat használom a Webpack-ot, mind a munkahelyemen, mind a saját projektjeimben. Ez az eszköz lehetővé teszi az összes olyan konzol törlését, amelyek nem kívánnak (típus szerint) maradni az éles verzióból az uglifyjs-webpack-plugin?
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}A konfiguráció nagyon triviális és leegyszerűsíti a munkát, ezért érezd jól magad a konzollal (de ne élj vele vissza!)
Ha tetszett a cikk, kérlek tapsolj és kövess engem :)Thx és maradj velünk?
Kövesse a legfrissebb híreimet és tippjeimet a Facebookon