Wprowadzenie
Z poprzednich wpisów wiecie, że używanie ChatGPT do pisania kodu może być bardzo przydatne w codziennej pracy, zwłaszcza gdy mówimy o nudnych zadaniach. A jak wygląda sytuacja z debuggowaniem…tutaj chyba nie trzeba komentować:
Znalezienie błędu we własnym kodzie może być trudne a jeszcze trudniejsze w kodzie napisanym przez innych.
Tutaj możemy skorzystać z pomocy ChatGPT w celu zaoszczędzenia czasu na debugowanie kodu. Jak już doskonale wiecie, generatywna sztuczna inteligencja wymaga kontekstu a w przypadku tworzenia czy debugowania kodu jest on niezwykle istotny. Warto spróbować zawęzić źródło problemu starając się skorzystać z poniższych kwestii:
- która część kodu powoduje błąd?
- czy pojawiają się jakieś komunikaty o błędach?
- co się dzieje i jakie jest poprawne zachowanie?
Debuggowanie
Wykorzystajmy kod z poprzedniego wpisu, ale wprowadźmy drobne modyfikacje, żeby go zepsuć. Problematyczny kod jest opatrzony komentarzem:
<!DOCTYPE html>
<html>
<head>
<title>Odliczanie dni do wydarzenia</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.tile {
background-color: #4CAF50;
color: #ffffff;
padding: 20px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
</style>
</head>
<body>
<div class="tile">
<h1>Odliczanie dni do wydarzenia</h1>
<p id="result"></p>
</div>
<script>
function daysUntilEvent(eventDate) {
var today = new Date();
var event = new Date(eventDate);
var timeDiff = Math.abs(event.getTime() - today.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return diffDays;
}
var eventDate = new Date("2023-12-25");
// resultElement nie będzie istniał...
//var resultElement = document.getElementById("result");
resultElement.textContent = "Pozostało " + daysUntilEvent(eventDate) + " dni do wydarzenia.";
</script>
</body>
</html>
Możecie spróbować uruchomić powyższy kod w przeglądarce. W konsoli znajdziecie błąd:
Pora zobaczyć jak ChatGPT poradzi sobie z zadaniem znalezienia błędnego kodu.
Prompt:
Funkcja do odlicznia dni do wydarzenia w poniższym kodzie przestała działać:
<!DOCTYPE html>
<html>
<head>
<title>Odliczanie dni do wydarzenia</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.tile {
background-color: #4CAF50;
color: #ffffff;
padding: 20px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
</style>
</head>
<body>
<div class="tile">
<h1>Odliczanie dni do wydarzenia</h1>
<p id="result"></p>
</div>
<script>
function daysUntilEvent(eventDate) {
var today = new Date();
var event = new Date(eventDate);
var timeDiff = Math.abs(event.getTime() - today.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return diffDays;
}
var eventDate = new Date("2023-12-25");
//var resultElement = document.getElementById("result");
resultElement.textContent = "Pozostało " + daysUntilEvent(eventDate) + " dni do wydarzenia.";
</script>
</body>
</html>
Znajdź przyczynę błędu. W konsoli przeglądarki widzę poniższy komunikat: "resultElement is not defined"
Odpowiedź:
Chyba prościej nie da się wyjaśnić tego co było powodem błędu. My teraz możemy przywrócić nasz "przypadkowo" zakomentowany kod i ponownie przetestować działanie funkcji. Oczywiście wszystko będzie grało!
