DevTools przeglądarki
DevTools (narzędzia deweloperskie) to wbudowany zestaw narzędzi w każdej nowoczesnej przeglądarce. Pozwala podejrzeć żądania HTTP, debugować JavaScript, edytować CSS na żywo i analizować wydajność. To codzienne narzędzie pracy każdego programisty webowego — zarówno front-end jak i PHP back-end.
console.log, błędy, wyrażeniaconsole.log(), wykonywanie koduScreenshot DevTools
Przykład debugowania
Minimum:
console.log() do debugowaniaForma: 10 slajdów, 10 minut
Ocena: 3.0Rozszerzenie:
Forma: 12–15 slajdów, 12 minut
Ocena: 4.0-5.0Zaawansowanie:
Forma: 15 slajdów + Q&A
Ocena: 5.0-6.0// Console API — różne metody logowaniaconsole.log('Zwykły komunikat');console.warn('Ostrzeżenie');console.error('Błąd!');console.table([{name: 'Jan', age: 18}, {name: 'Anna', age: 17}]);console.group('Dane użytkownika'); console.log('Imię: Jan'); console.log('Wiek: 18');console.groupEnd();console.time('fetch');// ... operacjaconsole.timeEnd('fetch'); // fetch: 42ms<?php// Debugowanie PHP przez nagłówki (widoczne w DevTools → Network)header('X-Debug-User: ' . ($_SESSION['user_id'] ?? 'guest'));header('X-Debug-Query-Count: 3');header('X-Debug-Memory: ' . memory_get_peak_usage(true) / 1024 . 'KB');
// Odpowiedź JSON widziana w DevTools → Network → Previewheader('Content-Type: application/json');echo json_encode([ 'status' => 'ok', 'data' => ['id' => 1, 'name' => 'Jan'],]);// Fetch w konsoli — testowanie API PHPconst response = await fetch('/api/users.php');const data = await response.json();console.table(data);
// Podejrzenie ciasteczekdocument.cookie; // widoczne też w DevTools → Application → CookiesDemonstracja na żywo
Pokaż błąd PHP przez Network