Cara melihat kode javascript di chrome

Artikel ini akan berfokus pada debug kode JavaScript di dalam Alat Pengembang Google Chrome. Alat Pengembang Chrome sangat kuat dan hampir pasti akan mempercepat proses pemecahan masalah Anda

Kami akan menggunakan Raygun Crash Reporting untuk menemukan pelacakan tumpukan dan baris kode tempat kesalahan terjadi. Anda dapat mendaftar untuk uji coba 14 hari gratis di sini

Langkah-langkah yang akan kita ikuti adalah

Jadi, mari selami

Langkah 1. Contoh pengantar proyek

Untuk mendemonstrasikan cara men-debug aplikasi dengan Chrome Dev Tools, saya akan menggunakan formulir "Tambah Orang" sederhana. Formulir ini memungkinkan Anda memasukkan nama depan, tengah, dan belakang. Saat mengklik tombol "Simpan", formulir akan melakukan sedikit pemrosesan, dan data akan dikirim ke server (imajiner) Anda

Kode untuk formulir ini memiliki tiga fungsi

1. Penangan klik
2. Fungsi string kapitalisasi
3. Fungsi simpan

var saveButton = document.getElementById('saveButton');
var firstNameField = document.getElementById('firstName');
var middleNameField = document.getElementById('middleName');
var lastNameField = document.getElementById('lastName');

function onSaveButtonClick(){
    var firstName = firstNameField.value;
    var middleName = middleNameField.value;
    var lastName = lastNameField.value;

    // capitalise the names
    firstName = capitalizeString(firstName);
    middleName = capitalizeString(middleName);
    lastName = capitalizeString(lastName);

    doSave(firstName, middleName, lastName);
}

function capitalizeString(value){
    return value.split('')[0].toUpperCase() + value.slice(1);
}

function doSave(firstName, middleName, lastName){
    alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}

saveButton.addEventListener('click', onSaveButtonClick);

Sayangnya, setelah mengirimkan ini ke produksi pada Jumat malam, Anda mulai melihat laporan kesalahan masuk ke dasbor Anda. Ada bug, dan Anda harus memperbaikinya dengan cepat

2. Analisis laporan di Raygun Crash Reporting

Laporan kesalahan yang masuk ke Raygun berisi banyak informasi yang dapat Anda gunakan untuk menemukan dan memperbaiki kesalahan, jadi mari kita lihat apa yang sedang kita hadapi

Informasi yang Anda perlukan untuk men-debug kesalahan terletak di modul "Stacktrace". Bagian "Pesan" dari Stacktrace adalah ikhtisar singkat tentang apa yang salah. Dalam hal ini, metode toUpperCase dipanggil pada nilai yang tidak ditentukan

Stacktrace memberi tahu Anda di mana kesalahan terjadi dan urutan pemanggilan fungsi yang mengarah ke sana. Seperti yang Anda lihat pada tangkapan layar di atas, kesalahan terjadi pada fungsi kapitalisasiString pada Baris 22 dari indeks. file js

Mengetahui baris mana yang memicu kesalahan berarti Anda dapat melompat langsung ke tempat terjadinya kesalahan dan mulai menggali apa yang menyebabkan masalah

3. Menjelajahi anatomi Alat Pengembang

Langkah pertama adalah meluncurkan aplikasi di Chrome dan membuka Alat Dev. Anda dapat melakukannya dengan keyboard menggunakan pintasan CMD-OPT-I di macOS atau CTRL-SHIFT-I di Windows

Alat Dev sekarang akan terbuka di dalam tab browser, dan tab Konsol akan aktif. Tab ini memungkinkan Anda untuk mengeksekusi kode JavaScript sewenang-wenang kapan saja atau untuk melihat keluaran apa pun dari konsol. mencatat panggilan

Coba masukkan alert('Hello!'); dan tekan Enter. Anda akan melihat lansiran langsung muncul

Tab Konsol adalah alat debugging yang berharga karena Anda dapat menggunakannya sebagai alas awal untuk mencoba kode dan mengevaluasi variabel saat Anda mendiagnosis masalah Anda

Untuk men-debug kode, pertama-tama Anda harus dapat menelusuri kode sumber di Alat Dev. Anda melakukan ini di tab Sumber

Panel kiri tab ini memiliki tampilan hierarki dari semua file sumber yang dimuat ke halaman. Anda dapat menavigasi ini seperti yang Anda lakukan di IDE, karena konten ditampilkan di panel tengah. Panel bawah memberi Anda semua opsi debug, yang akan kami bahas lebih detail nanti di artikel

Jika Anda memiliki banyak file, Anda dapat mencarinya dengan menggunakan pintasan CMD-P di macOS atau CTRL-P di Windows, lalu mulailah mengetik nama file tersebut

Di aplikasi, Anda tahu masalahnya terletak pada index.js file, jadi pilih dari daftar di sebelah kiri untuk melihat isinya

Langkah 4. Tambahkan breakpoint ke kode Anda

Sekarang setelah Anda tahu cara melihat kode Anda, kami ingin dapat melewatinya satu baris pada satu waktu untuk melihat di mana ada kesalahan. Untuk melakukan ini, kami menggunakan breakpoint. Breakpoint adalah penanda pada titik tertentu dalam kode yang menghentikan eksekusi sehingga Anda dapat memeriksa status kode pada titik waktu tersebut, dan melanjutkan eksekusi baris demi baris

Ada beberapa cara berbeda untuk menambahkan breakpoint yang akan saya bahas di sini

Titik henti peristiwa

Anda dapat memaksa eksekusi berhenti saat peristiwa tertentu terjadi di halaman. Menggunakan bagian Titik Henti Pendengar Acara di panel debugging, Anda dapat memperluas grup yang relevan dan menemukan acara yang ingin Anda hentikan eksekusi setelahnya

Misalnya, Anda dapat mencentang kotak untuk kejadian "klik" yang akan menghentikan eksekusi saat klik dilakukan di mana saja di halaman

Breakpoint baris

Cara paling umum untuk menambahkan breakpoint adalah dengan menemukan garis spesifik yang ingin Anda hentikan dan menambahkannya di sana. Arahkan ke file dan baris yang Anda minati dan klik nomor baris. Penanda biru akan ditambahkan pada baris itu dan eksekusi sekarang akan berhenti setiap kali menyentuh baris kode itu. Pada tangkapan layar di bawah ini akan berhenti di Baris 7 dari index.js

Titik henti terprogram

Anda juga dapat menambahkan breakpoint secara terprogram, yang dapat berguna jika Anda tidak ingin menelusuri kode Anda di Dev Tools saat Anda memilikinya di IDE Anda. Anda juga dapat menggunakan pendekatan ini untuk memasukkan breakpoint secara kondisional (misalnya, pada iterasi loop tertentu, atau jika kode berjalan saat memuat halaman dan tidak ada waktu untuk menambahkan breakpoint secara manual)

Untuk melakukan ini, tambahkan pernyataan debugger;_ di posisi yang ingin Anda hentikan eksekusinya. Kode di bawah ini akan memiliki efek yang sama dengan Breakpoint Garis di atas

Titik henti kesalahan

Alat Dev memiliki fitur praktis yang akan menghentikan eksekusi saat menemukan pengecualian dalam kode Anda, memungkinkan Anda untuk memeriksa apa yang terjadi pada saat terjadi kesalahan. Anda bahkan dapat memilih untuk berhenti pada pengecualian yang sudah ditangani oleh pernyataan try/catch

Untuk mengaktifkan fitur ini, klik ikon tanda berhenti dengan simbol jeda di dalamnya. Ini akan menjadi biru saat diaktifkan. Centang kotak yang tampaknya juga merusak pengecualian yang tertangkap

Langkah 5. Telusuri kode Anda

Sekarang kita tahu cara membobol kode kita, sekarang kita ingin melewati setiap baris sehingga kita dapat mengetahui apa yang salah. Pertama, beri breakpoint pada Baris 7 - tepat di dalam handler klik tombol Add sehingga kita bisa mulai dari awal

Pada bagian sebelumnya, kami menyimpulkan dari laporan kesalahan Raygun bahwa kesalahan berasal dari metode capitalizeString. Metode ini dipanggil tiga kali, jadi contoh mana yang salah? . Anda tahu bahwa Baris 13 berkaitan dengan nilai Nama Tengah. Oleh karena itu, Anda harus memfokuskan upaya Anda untuk mereproduksi kesalahan dengan menyusun input Anda dengan benar

Dengan pengetahuan ekstra ini, Anda dapat mengisi kolom Nama Depan dan Belakang tetapi kosongkan Nama Tengah untuk melihat apakah ini memicu kesalahan

Tekan tombol Simpan. Dari sini, tab Sumber akan terbuka di mana Anda dapat melihat breakpoint diaktifkan. Anda sekarang dapat mulai menelusuri kode. Untuk melakukan ini, Anda menggunakan tombol di panel debugging. Rangkaian tombol ini dapat digunakan untuk menjeda eksekusi, melangkahi pemanggilan fungsi berikutnya, melangkah ke pemanggilan fungsi berikutnya, melangkah keluar dari pemanggilan fungsi saat ini, melangkah maju, menonaktifkan breakpoint sama sekali, atau menjeda pengecualian

Anda akan menggunakan ini untuk melangkah ke fungsi kapitalisasiString Anda. Jadi dari Line 7, gunakan tombol “Step over Current Line” sampai kita sampai ke Line 13. Garis aktif ditunjukkan dengan garis di atas dan di bawahnya

Anda sekarang dapat menggunakan tombol "Langkah ke Fungsi" untuk beralih ke panggilan ke fungsi kapitalisasiString, melompat dari Baris 13 ke Baris 20

Menavigasi Stack Panggilan

Saat Anda menelusuri kode seperti ini, Anda mungkin ingin melompat kembali ke fungsi induk untuk memeriksa apa yang terjadi pada saat itu. Untuk melakukan ini, gunakan bagian Call Stack, yang mencantumkan semua fungsi yang telah dilewati untuk sampai ke titik ini dalam kode Anda — persis sama dengan Call Stack yang ditampilkan dalam laporan kesalahan Raygun

Anda cukup mengklik item dalam daftar ini dan Anda akan dipindahkan kembali ke fungsi itu. Ingatlah bahwa posisi saat ini dalam eksekusi tidak berubah, jadi penggunaan tombol Step Over akan dilanjutkan dari atas tumpukan panggilan

Langkah 6. Tentukan status aplikasi Anda

Sekarang Anda telah menavigasi ke tempat kesalahan Anda terjadi, kami perlu memeriksa status aplikasi dan mencari tahu apa yang menyebabkan kesalahan tersebut

Ada banyak opsi untuk mencari tahu apa isi variabel nilai dan mengevaluasi ekspresi sebelum kode berpindah. Kami akan melihat masing-masing secara bergiliran

Mouse melayang

Cara paling sederhana untuk menentukan nilai suatu variabel adalah dengan mengarahkan mouse ke atasnya dan tooltip akan muncul dengan nilainya. Anda bahkan dapat memilih sekelompok ekspresi dan mengarahkan kursor ke atasnya untuk mendapatkan output dari ekspresi tersebut

Jam tangan

Anda dapat menambahkan ekspresi ke panel Watch yang menampilkan nilai ekspresi saat ini saat Anda menelusuri kode. Ini berguna untuk melacak bagaimana ekspresi yang lebih kompleks berubah dari waktu ke waktu

Anda menambahkan ini dengan mengklik tombol "+" di bagian atas panel atau dengan memilih ekspresi, mengklik kanan dan memilih "Tambahkan teks yang dipilih ke jam tangan"

Cakupan

Panel Lingkup menampilkan daftar variabel yang saat ini berada dalam cakupan dan nilai terkaitnya. Ini mirip dengan panel Tonton tetapi dihasilkan secara otomatis oleh Alat Dev Chrome. Panel Lingkup bagus untuk mengidentifikasi variabel lokal dan menyimpan Anda secara eksplisit menambahkannya ke daftar Pantauan

Menghibur

Terakhir, tab Konsol adalah alat yang hebat untuk memeriksa nilai ekspresi dan bereksperimen dengan kode. Cukup beralih kembali ke tab Konsol, ketik beberapa kode dan tekan enter. Alat Dev Chrome akan mengeksekusi kode dalam konteks dan cakupan breakpoint saat ini

Langkah 7. Perbaiki bug

Beralih ke tab Konsol dan mari kita mulai menguraikan garis yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya menggunakan tab Konsol

Pertama, periksa output dari panggilan value.split('') sehingga Anda bisa mendapatkan karakter pertama lalu panggil fungsi toUpperCase di atasnya

Mengeksekusi ekspresi di Konsol menunjukkan bahwa ia mengembalikan larik kosong — dari sinilah kesalahan berasal. Karena mengembalikan array kosong dan kami mencoba memanggil toUpperCase pada item pertama (yang tidak ditentukan, karena tidak ada item) yang memberi Anda kesalahan

Anda dapat memverifikasi ini dengan memasukkan ekspresi lengkap ke Konsol

Jadi, untuk memperbaiki masalah, Anda perlu memeriksa apakah string tersebut kosong atau tidak terdefinisi. Jika ya, Anda perlu mengembalikan string kosong tanpa melakukan pemrosesan apa pun

function capitalizeString(value){
    if(!value || value.length === 0){
        return '';
    }

    return value.split('')[0].toUpperCase() + value.slice(1);
}

Ringkasan

Itu mengakhiri pengantar cepat untuk men-debug JavaScript di Alat Pengembang Chrome. Ini adalah alat yang ampuh dan meluangkan waktu untuk menguasainya akan membuat perbedaan yang signifikan dalam mempercepat keterampilan debugging Anda

Ada sejumlah fitur hebat di sana yang belum saya sentuh di sini, jadi saya mendorong Anda untuk mengaktifkannya dan bereksperimen dalam aplikasi Anda. Biasakan menelusuri kode dan memeriksa keadaan di setiap titik

Jika Anda ingin mempelajari lebih lanjut, kami menulis seluruh panduan tentang debugging JavaScript di browser utama. Debug JavaScript menggunakan proses yang sama seperti di atas

Bagaimana Anda memeriksa kode JavaScript di Chrome?

Bagaimana cara menjalankan kode JavaScript di browser?

Bisakah Anda melihat JavaScript di inspeksi?

Bagaimana saya tahu fungsi JavaScript mana yang dipanggil di Chrome?