Bagaimana cara membuka file javascript di safari?

Men-debug JavaScript adalah bagian yang tak terhindarkan dari pengembangan web, dan bukan yang terbaik. Pekerjaan debug sepertinya selalu muncul ketika Anda sudah terkubur di bawah tumpukan pekerjaan, dan rekan tim memberi tahu Anda tentang masalah yang diabaikan dalam pengujian dan telah menyebabkan frustrasi sejak rilis terakhir Anda

Itulah mengapa sangat membantu untuk bersiap menghadapi kemungkinan itu, dan dilengkapi dengan alat pengembang untuk membantu Anda melakukan debug lebih cepat

Jika Anda telah membuat situs web yang ramah seluler dan ada sesuatu yang sedang diputar — katakanlah, tombol kirim formulir kontak Anda tidak berfungsi di perangkat seluler — Anda tidak memiliki kemewahan hanya dengan menekan Option + ⌘ + C dan . Itu sebabnya Anda perlu mempelajari cara men-debug seluler di desktop

Artikel ini akan berfokus pada debug kode JavaScript yang dijalankan di Safari pada perangkat iOS 6+ menggunakan desktop Safari Web Inspector

(Untuk mempelajari lebih lanjut tentang menggunakan alat pengembang untuk men-debug pada perangkat dan sistem operasi yang berbeda, kami memiliki seluruh rangkaian artikel untuk mencakup Microsoft Edge, Chrome, Firefox, Opera, Safari, dan Visual Studio)

Apa yang akan Anda pelajari dari artikel ini

Mengetahui cara men-debug kode JavaScript yang dijalankan di perangkat iOS melalui Safari adalah keuntungan besar dan dapat mengurangi waktu debug secara dramatis. Lewatlah sudah hari-hari menggunakan panggilan peringatan untuk debug

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

Langkah-langkah yang akan kita ikuti adalah

Jadi, mari selami

Langkah 1. Contoh pengantar proyek

Untuk mendemonstrasikan cara men-debug aplikasi dengan Safari Web Inspector, kami akan menggunakan formulir Add Person 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. Cepat

Langkah 2. Menganalisis laporan kesalahan Raygun

Laporan kesalahan yang masuk ke Raygun memiliki banyak info 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 capitalizeString pada baris 20 dari file index.js

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

Bahkan jika Anda mengaburkan file JavaScript Anda pada penerapan menggunakan webpack atau alat bundling lainnya, Raygun juga dapat memahami versi yang diperkecil menggunakan peta sumber dan membantu Anda menemukan pelakunya dalam waktu singkat.

Langkah 3. Menyiapkan dan menyambungkan perangkat Anda

Sebelum kita dapat mulai menggunakan Web Inspector untuk men-debug aplikasi kita, pertama-tama kita harus mengaktifkan browser iOS dan OSX untuk pengembangan

Aktifkan Inspektur Web di iOS

Di perangkat iOS Anda, navigasikan ke aplikasi Pengaturan dan gulir ke bawah dan pilih entri Safari

Di dalam layar pengaturan Safari, gulir ke bagian paling bawah dan pilih opsi "Lanjutan". Kemudian, di dalam bagian Lanjutan, aktifkan opsi "Web Inspector".

Aktifkan Menu Kembangkan di macOS

Dengan pengaturan perangkat Anda, kami perlu meluncurkan Safari di macOS dan mengaktifkan menu Kembangkan. Buka dialog Preferensi Safari dengan mengklik item menu "Safari" dan memilih "Preferensi"

Di dalam dialog Preferensi, buka tab Lanjut dan kemudian centang opsi "Tampilkan menu Kembangkan di bilah menu" di bagian bawah

Anda sekarang dapat menutup dialog Preferensi

Menghubungkan perangkat Anda

Agar macOS Safari dapat berkomunikasi dengan perangkat iOS Anda, kami perlu menghubungkannya ke komputer Anda melalui kabel USB standar

Buka contoh Aplikasi

Terakhir, mari buka aplikasi web contoh di perangkat iOS Anda di tab Safari baru. Dengan itu selesai, kami siap untuk pergi

Langkah 4. Menjelajahi anatomi Inspektur Web

Sekarang browser Safari sudah siap dan perangkat kita terhubung sehingga kita bisa membuka Web Inspector

Buka menu "Kembangkan" dan Anda akan melihat entri di dekat bagian atas yang menunjukkan nama perangkat Anda (misalnya, "Jeff's iPhone"). Arahkan kursor ke item ini agar menu terbuka. Menu baru akan menampilkan semua tab yang terbuka di Mobile Safari dan yang dapat dihubungkan dengan Web Inspector. Klik item yang terkait dengan aplikasi contoh

Inspektur Web sekarang akan terbuka dan kami siap untuk melakukan debug. Inspektur Web yang Anda lihat sekarang identik dengan yang akan Anda lihat jika Anda membukanya untuk debugging dari halaman di Desktop Safari, itu hanya contoh yang berdiri sendiri yang menunjuk ke tab yang terbuka di perangkat iOS Anda

Di jendela Web Inspector tab Console akan aktif (jika tidak, pilih). 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 untuk mencoba kode dan mengevaluasi variabel saat Anda mendiagnosis masalah Anda

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

Bagian bawah panel kiri di dalam tab ini memiliki daftar semua file sumber yang dimuat ke halaman. Anda dapat mengklik salah satu nama file ini, dan isinya ditampilkan di panel tengah. Anda dapat memperluas panel tambahan yang berisi alat debugging dengan mengklik tombol di kanan atas tab

Jika Anda memiliki banyak file, Anda dapat mencarinya dengan menggunakan CMD-P di macOS dan kemudian mulai mengetik nama file tersebut

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

Langkah 5. Tambahkan breakpoint ke kode Anda

Sekarang Anda dapat 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

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 akan berhenti setiap kali menyentuh baris kode ini. Pada tangkapan layar di bawah ini akan berhenti di Baris 7 dari index.js

Anda juga akan melihat bahwa daftar breakpoint yang Anda tambahkan dipertahankan di kiri atas tab. Daftar ini berguna untuk menavigasi ke breakpoint dengan cepat dalam file besar, atau menonaktifkannya untuk sementara dengan mengeklik penanda di sebelah entri di panel kiri

Untuk menghapus breakpoint, klik kanan penanda garis dan pilih "Delete Breakpoint"

Titik henti terprogram

Anda juga dapat menambahkan breakpoint secara terprogram yang dapat berguna jika Anda tidak ingin menelusuri kode Anda di Web Inspector saat Anda sudah 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 melakukannya, Anda menambahkan debugger; . Kode di bawah ini akan memiliki efek yang sama dengan Line Breakpoint di atas

Titik Henti Kesalahan

Inspektur Web 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 berhenti saat terjadi pengecualian, klik ikon panah di sebelah label "Semua Pengecualian". Anda akan melihatnya menjadi gelap saat diaktifkan. Untuk hanya berhenti saat terjadi pengecualian yang tidak tertangkap, klik ikon panah di samping label "Pengecualian yang Tidak Ditangkap".

Langkah 6. Telusuri kode Anda

Sekarang setelah kita tahu cara memasukkan breakpoint ke dalam 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

Di bagian sebelumnya, kami menyimpulkan dari laporan error Raygun bahwa error tersebut berasal dari metode kapitalisasiString. 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 Sources akan terbuka di mana Anda dapat melihat bahwa breakpoint telah diaktifkan. Anda sekarang dapat mulai menelusuri kode. Untuk melakukannya, gunakan tombol di kiri atas panel Sumber

• Ikon pertama, panah breakpoint, dapat digunakan untuk menonaktifkan atau mengaktifkan semua breakpoint
• Jeda kedua/melanjutkan eksekusi kode Anda dan berlanjut hingga breakpoint berikutnya
• Ikon ketiga, panah bergerak di atas garis, "melangkahi" garis saat ini, memindahkan kita ke baris berikutnya
• Panah yang menunjuk ke baris "melangkah ke" pemanggilan fungsi berikutnya yang ada di baris itu
• Ikon terakhir, panah yang menunjuk menjauh dari garis, melangkah keluar dari panggilan fungsi saat ini, mencadangkan tumpukan panggilan satu tingkat

Anda akan menggunakan ini untuk melangkah ke fungsi kapitalisasiString Anda. Jadi dari Line 7, gunakan tombol “Step over” sampai kita sampai ke Line 13. Garis aktif ditunjukkan dengan latar belakang hijau. Anda sekarang dapat menggunakan tombol "Langkah ke" untuk beralih ke panggilan ke fungsi kapitalisasiString, melompat dari baris 13 ke baris 20

Untuk mempelajari lebih lanjut tentang perbedaan antara "melangkahi" dan "melangkah ke" saat men-debug JavaScript, lihat artikel ini

Menavigasi tumpukan 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 Callstack 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 7. Tentukan status aplikasi Anda

Sekarang setelah Anda 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 nilai tersebut. Anda bahkan dapat memilih grup ekspresi dan mengarahkan kursor ke atas pilihan untuk mendapatkan keluaran ekspresi

Perhatikan ekspresi

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

Anda menambahkannya dengan mengeklik tombol “+” di bagian atas panel, memasukkan ekspresi untuk menonton dan menekan enter

Variabel Lokal

Bagian Variabel Lokal yang terlihat di bawah bagian Watch Expressions menampilkan daftar variabel yang saat ini berada dalam cakupan dan nilai terkaitnya. Panel Variabel Lokal mirip dengan panel Watch Expressions tetapi dihasilkan oleh Web Inspector secara otomatis. Bagian ini bagus untuk mengidentifikasi variabel lokal dan menyimpan Anda secara eksplisit menambahkannya ke daftar Watch Expressions

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. Inspektur Web akan mengeksekusi kode dalam konteks dan cakupan breakpoint saat ini

Langkah 8. Perbaiki bug

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

Pertama, periksa output dari panggilan value.split('') (yang dimaksudkan untuk mengambil karakter pertama dan kemudian memanggil 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 dalam array (yang tidak terdefinisi, karena tidak ada item sama sekali dalam array) hasil kesalahan

Anda dapat memverifikasi ini dengan memasukkan ekspresi lengkap ke Konsol. Untuk memperbaiki masalah ini, Anda perlu memeriksa apakah string kosong atau tidak terdefinisi sebelum menguraikannya. 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 merangkum panduan cepat untuk men-debug JavaScript di Mobile Safari dengan Web Inspector. Sangat mudah untuk mengaktifkan debugging jarak jauh ini dan memanfaatkan sepenuhnya Safari Web Inspector untuk halaman yang dibuka di perangkat iOS. Untungnya, alat pengembang untuk melakukan debug pada seluler telah berkembang pesat dan ini telah membuat pelacakan bug khusus seluler menjadi jauh lebih mudah

Anda harus dapat menggunakannya saat mencoba melacak bug Safari Seluler Anda berikutnya. Sangat bermanfaat meluangkan waktu untuk menguasai alat-alat ini untuk meningkatkan keterampilan debugging Anda. Ada sejumlah fitur hebat lainnya di Web Inspector, jadi kami menyarankan Anda meluangkan waktu untuk menjelajah

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

• Microsoft Edge
• Chrome
• Firefox
• Opera
• Safari
• Safari Seluler (iOS)
• Studio visual

Seperti yang baru saja kami tunjukkan, Raygun adalah alat luar biasa yang dapat membuat tugas rumit menjadi jauh lebih mudah. Jika Anda ingin melihatnya sendiri, Anda dapat mendaftar untuk uji coba 14 hari gratis kapan saja - sekarang juga jika Anda mau

Bagaimana cara menjalankan file JavaScript di Safari?

Bagaimana cara membuka file JavaScript di browser saya?

Mengapa JavaScript tidak berfungsi di Safari?

Bagaimana cara membuka a. file JS di Mac?