logo

Přečtěte si, jak ladit kód JavaScript pomocí Chrome DevTools

Úvod 🤓

Ladění kódu je jednou ze základních částí programování, když programuji dlouhé hodiny, trávím více času opravováním chyb než psaním řádků kódu, ale chyby často nacházím přes console.log() , což je užitečný nástroj, ale není vždy nejoptimálnější nebo nejpřesnější pro ladění.

Všechny současné prohlížeče mají nástroj specializovaný na funkci ladění a málokdo jej používá, nicméně v tomto příspěvku vám mám v úmyslu jednoduchým, jasným způsobem a na příkladu vysvětlit, jak jej můžete použít a dostat z něj veškerou šťávu . výkonný nástroj.

V tomto příspěvku budu používat Chrome, ale nepochybuji o tom, že znalosti lze aplikovat na jakýkoli jiný prohlížeč.

Pojďme do práce

Začněme jednoduchým programem, ale pokud to nechcete dělat, můžete použít příklad google. 

<!--  -->
<!DOCTYPE html>
<head> <title>suma</title> </head>
<body>
<h1>Depuracion de JavaScript</h1>
<label> Valor 1:
<input type="text" placeholder="123">
</label> <br />
<label> Valor 2:
<input type="text" placeholder="789">
</label> <br />
<button> Sumar valor 1 y valor 2 </button>
<p></p>
<script src="app.js"></script>
</body>
</html>


// app.js
function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = 'Error';
    return;  }
  updateLabel();
}
function inputsAreEmpty() {
  if (getNumber1()  '' || getNumber2()  '') {
    return true;
  } else { return false; }
}
function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
function getNumber1() {
  return inputs[0].value; }
function getNumber2() {
  return inputs[1].value; }
var inputs = document.querySelectorAll('input');
var label = document.querySelector('p');
var button = document.querySelector('button');
button.addEventListener('click', onClick);

Do každého pole vložte několik čísel, stiskněte tlačítko Přidat a uvidíte, co se stane.

Očividně máme chybu ⚠
Tento jednoduchý příklad nám pomůže.

Seznámení s panelem nástrojů pro vývojáře

Panel nástrojů pro vývojáře nebo také známý jako DevTools je ten, který nám pomůže při ladění kódu nebo jiných akcí, které chceme provést.

Tento panel lze otevřít různými způsoby.

Pomocí myši

  1. Klikněte na stránku pravým tlačítkem
  2. Kontrola | Zkontrolujte

S kombinací kláves

  • Mac:Command + Option + I
  • Linux | Windows:Control + Shift + I

Bez ohledu na to, jakým způsobem jej otevřete, otevře se něco podobného:

Co nás zajímá, je horní část, která říká sources | recursos , stiskneme a změní se obsah panelu.

Každý interní panel může upravovat svou velikost, včetně jejich rozložení.

Pojďme identifikovat každý panel:

  1. Podokno souborů zobrazuje server, na kterém je stránka spuštěna, kořenovou složku a soubory HTML, CSS a JavaScript a další obsažené na zobrazené stránce.
  2. Panel editoru kódu po výběru souboru v prvním panelu se zobrazí jeho kód, který vám umožní jej upravit.
  3. Panel ladění de JS Má různé užitečné nástroje pro ladění, mimo jiné nástroje jako seznam bodů přerušení, zásobník volání, rozsah proměnných.
  4. Panel konzoly V případě, že konzola není viditelná, vyberte jakýkoli předchozí panel a stiskněte klávesu esc . Ukazuje konzolu, ve které můžeme použít kód JavaScript.

Body přerušení

Bod přerušení v několika slovech je bod, kde se program zastaví a ukáže nám, jak jsou proměnné nalezeny, a další informace v tomto konkrétním bodě kódu.

Body přerušení s console.log

Jeden z nejběžnějších způsobů vytváření bodů zlomu je to přes console.log(), což není špatné, ale je to omezené.

Pokud například chceme neustále znát stav každé proměnné, udělali bychom něco takového:

//app.js
function updateLabel() {
  var addend1 = getNumber1();
  console.log(`valor 1: ${addend1}`)
  var addend2 = getNumber2();
  console.log(`valor 2: ${addend2}`)
  var sum = addend1 + addend2;
  console.log(`Suma: ${sum}`)
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
  console.log(`Texto asignado: ${addend1 + ' + ' + addend2 + ' = ' + sum}`)
}

Pokud znovu spustíme součet a uvidíme sekci konzoly, ukáže nám následující.

Vidíme, že každá hodnota je číslo, ale součet není úplně správný.

Body přerušení s debuggerem

Ve výše uvedeném kódu nahradíme console.log() instrukcí debugger; a vraťme se na kartu zdrojů. 

//app.js
function updateLabel() {
  var addend1 = getNumber1();
  debugger;
  var addend2 = getNumber2();
  debugger;
  var sum = addend1 + addend2;
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
  debugger;
}

Umístíme hodnoty a stiskneme tlačítko pro přidání.

Jak můžeme vidět, děje se několik zvláštních věcí.

  1. vidíme, jak stránka trochu ztmavla.
  2. na panelu editoru kódu označte řádek 19, který říká debugger
  3. na panelu ladění zobrazuje kartu rozsahu a následně nám ukazuje hodnotu našich místních a globálních proměnných.

Pojďme dál běžet a uvidíme, co se stane.

Máme k tomu dva způsoby:

  1. ⏩ Přejít na další bod přerušení.
  2. ⟳ Projděte řádek po řádku.

⏩ Udělejme pár skoků mezi jednotlivými body přerušení a uvidíme, co nám ukáže.

Panel ladění

Pokud se zaměříme na panel ladění, můžeme vidět rozsah s hodnotami našich proměnných, lokálních i globálních, můžeme také vidět zásobník volání a jak jsou jednotlivé funkce seřazeny.

Můžeme si všimnout, jak nám ukazuje každou proměnnou, jako jsme to udělali s console.log() , nicméně existuje několik výhod.

  1. Nemuseli jsme je uvádět jeden po druhém.
  2. Ukazuje nám rozsah.
  3. Umíme odvodit typ dat.

Je to zvláštní, protože vidíte dvojité uvozovky " " Mělo by nám to poskytnout představu o tom, co by mohlo být špatně.

Pokud si pamatujeme hodnoty uvnitř dvojitých uvozovek "1" jsou typy String , zatímco hodnoty bez uvozovek 1 jsou number .

Předpokládejme, že si tím nejsme úplně jisti a chceme to dále prozkoumat

Co ještě můžeme udělat?

Přehrát

Karta sledovat ve stejném panelu nám může pomoci pracovat s proměnnými.

Pojďme zkontrolovat typ proměnné pomocí funkce typeof.

Uvnitř Hodinky stiskněte ikonu + a vložte dovnitř následující pokyny.

typeof addend1

typeof addend2

typeof sum

Můžeme si všimnout, že typ každé z proměnných je řetězec, což naznačuje, že operace, kterou provádí, není sčítání, ale zřetězení.

Konzole

Můžeme totéž udělat jiným způsobem?

Správně .
Pomocí konzole můžeme psát kód a když jsme v rámci funkce, můžeme vidět její proměnné.

Stiskněte esc a uvnitř konzoly napište totéž.

typeof addend1

typeof addend2

typeof sum

Nyní, když víme, že hodnoty jsou String a ne number , můžeme odvodit, že to není sčítání, ale spíše zřetězení.

Řešení

Co můžeme udělat, abychom to napravili?

Použijeme analýzu z řetězce na celá čísla.

Do konzole vložíme následující kód a stiskneme enter . 

parseInt(addend1) + parseInt(addend2)

Jak vidíme, nyní ukazuje očekávanou hodnotu, s vědomím, že tuto změnu použijeme v našem kódu, aby fungoval správně. 

function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  // var sum = addend1 + addend2;
  var sum = parseInt(addend1) + parseInt(addend2)
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Znovu spustíme náš program a uvidíme výsledek.

Zkrátka ⚡

Chrome a další prohlížeče mají vývojářské nástroje, které nám pomáhají při programování, záložka, na kterou jsme se tentokrát zaměřili, byla Zdroje, která nám pomáhá ladit kód.

Ladění kódu, jak jsme viděli, lze provést různými způsoby, buď pomocí console.log () nebo pomocí instrukce debugger, ačkoli použití console.log je možné, není to nejlepší způsob, jak ladit náš kód, na druhou stranu pomocí Instrukce debuggeru, ruku v ruce s vývojářskými nástroji, se tento úkol stává extrémně jednoduchým.

Stojí za zmínku, že ačkoli jsou ladicí nástroje Chrome extrémně užitečné, musíme mít také určitou znalost jazyka, abychom mohli detekovat chyby a vědět, jak je řešit.

Reference 🧐

  • Javascript nástroje DevTools
  • Rozsah
  • typ.
  • Operátor +
  • parseInt.
🐦Twitter 🤖 SamuelNarciso.com 📸 Instagram