Cara men-debug kode php di chrome

Konfigurasikan Pembantu Xdebug untuk Chrome

1. Instal ekstensi pembantu Xdebug untuk Chrome dari Toko Web Chrome

2. Dalam PhpStorm, aktifkan mendengarkan koneksi debug yang masuk dengan mengklik pada bilah alat atau memilih Jalankan. Mulai Mendengarkan Koneksi Debug PHP

3. Mulai koneksi dari sisi browser. Klik ikon Zend Debugger pada toolbar browser untuk memulai sesi debug atau pembuatan profil

   Debugging kode JavaScript hanya didukung di Google Chrome dan browser berbasis Chromium lainnya

   Petunjuk di bawah memandu Anda melalui langkah-langkah dasar untuk memulai debugger ini

   Untuk mempelajari cara men-debug kode PHP dan JavaScript secara bersamaan dari dalam PhpStorm, lihat Men-debug kode PHP dan JavaScript secara bersamaan

   Sebelum kamu memulai

   1. Pastikan JavaScript dan TypeScript plugin yang dibundel diaktifkan di pengaturan. Tekan Ctrl+Alt+S untuk membuka pengaturan IDE dan pilih Plugins . Klik tab Terpasang . Di kolom pencarian, ketik JavaScript dan TypeScript . Untuk detail selengkapnya tentang plugin, lihat Mengelola plugin.

   2. Pastikan JavaScript Debugger plugin yang dibundel diaktifkan di pengaturan. Tekan Ctrl+Alt+S untuk membuka pengaturan IDE dan pilih Plugins . Klik tab Terpasang . Di kolom pencarian, ketik JavaScript Debugger . Untuk detail selengkapnya tentang plugin, lihat Mengelola plugin.

   3. Konfigurasikan debugger bawaan seperti yang dijelaskan dalam Mengonfigurasi debugger JavaScript

      Agar perubahan yang Anda buat pada kode HTML, CSS, atau JavaScript segera ditampilkan di browser tanpa memuat ulang halaman, aktifkan Live Edit functionality. For more details about the live editing functionality, see Live Edit in HTML, CSS, and JavaScript.

   Debug aplikasi yang berjalan di server bawaan

   PhpStorm memiliki server web bawaan yang dapat digunakan untuk mempratinjau dan men-debug aplikasi Anda. Server ini selalu berjalan dan tidak memerlukan konfigurasi manual apa pun. Semua file proyek disajikan di server bawaan dengan URL root http. // localhost. , sehubungan dengan struktur proyek.

   Mulai men-debug

   1. Tetapkan breakpoint dalam kode JavaScript, sesuai kebutuhan

   2. Buka file HTML yang mereferensikan JavaScript untuk melakukan debug atau pilih file HTML di jendela alat Proyek

   3. Dari menu konteks editor atau pilihan, pilih Debug . PhpStorm menghasilkan konfigurasi debug dan memulai sesi debugging melaluinya. File terbuka di browser, dan jendela alat Debug muncul.

      Untuk menyimpan konfigurasi yang dibuat secara otomatis untuk digunakan kembali lebih lanjut, pilih Simpan dari menu konteks setelah sesi debug selesai.

   4. Dalam jendela alat Debug , lanjutkan seperti biasa. menelusuri program, eksekusi program, memeriksanya saat ditangguhkan, melihat DOM HTML yang sebenarnya, menjalankan potongan kode JavaScript di Konsol, dan seterusnya.

   Secara default, sesi debug dimulai di jendela baru dengan data pengguna Chrome khusus. Untuk membuka instance Chrome baru dengan tampilan dan nuansa yang Anda kenal, konfigurasikan Chrome di PhpStorm untuk memulai dengan data pengguna Anda, lihat detailnya

   Contoh

   Misalkan Anda memiliki aplikasi sederhana yang terdiri dari indeks. html file dan index. js , di mana index. html referensi index. js . Untuk mulai men-debug aplikasi ini menggunakan server bawaan, buka index. html di editor dan pilih Debug 'index. html' dari menu konteks.

   

   PhpStorm membuat konfigurasi run/debug secara otomatis, dan sesi debug dimulai.

   

   Untuk memulai ulang konfigurasi run/debug baru, klik tombol Debug () di bagian atas . Debug Run | Debug dari menu utama.

   

   Muat ulang halaman saat ini di browser

   Selain memulai ulang aplikasi Anda dengan mengeklik tombol Jalankan kembali () di Debug tool window, you can also click the Reload in Browser button () to reload the page where you have currently navigated. This works the same way as the Muat Ulang Laman (Ctrl+R) di Chrome.

   Contoh di bawah menunjukkan aplikasi sederhana yang terdiri dari dua halaman HTML dan skrip JavaScript. Awal rumah. html halaman memiliki Kirim tombol saat menekan kalkulator. html laman terbuka dengan hasil Kalkulator. js eksekusi skrip.

   Selama sesi debug, mengeklik tombol Jalankan kembali () akan memuat ulang home.html dengan tombol Kirim . Mengeklik tombol Muat Ulang di Browser () memuat ulang kalkulator. html sehingga semua keluaran skrip sebelumnya dihapus dan debugger kembali ke baris 1 di Kalkulator. js .

   

   Debug aplikasi yang berjalan di localhost dalam mode pengembangan

   Jika aplikasi Anda berjalan dalam mode pengembangan pada localhost, Anda dapat mulai men-debugnya dari Terminal bawaan (Alt+F12 . Cukup tahan Ctrl+Shift dan klik URL tempat aplikasi berjalan.

   

   1. Tetapkan breakpoint dalam kode Anda

   2. Mulai aplikasi dalam mode pengembangan, misalnya menggunakan skrip npm

   3. Jendela alat Jalankan atau Terminal menunjukkan . Tahan Ctrl+Shift dan klik tautan URL ini. PhpStorm memulai sesi debug dengan konfigurasi tipe JavaScript Debug yang dihasilkan secara otomatis.

   Ini juga berfungsi untuk debugging , , , dan aplikasi

   Debug aplikasi yang berjalan di server web eksternal

   Seringkali Anda mungkin ingin men-debug JavaScript sisi klien dari aplikasi yang berjalan di server web pengembangan eksternal, misalnya didukung oleh Node. js

   1. Tetapkan breakpoint dalam kode JavaScript, sesuai kebutuhan

   2. Jalankan aplikasi dalam mode pengembangan . Seringkali Anda perlu menjalankan npm start_ untuk itu.

      Saat server pengembangan siap, salin alamat URL tempat aplikasi berjalan di browser - Anda harus menentukan alamat URL ini di konfigurasi run/debug

   3. Buat konfigurasi debug dengan tipe JavaScript Debug . dari menu utama, pilih Jalankan. Edit Konfigurasi , di dialog Edit Konfigurasi yang terbuka, klik Tambah . Dalam Konfigurasi Jalankan/Debug. Dialog JavaScript Debug yang terbuka, tentukan alamat URL tempat aplikasi berjalan. URL ini dapat disalin dari bilah alamat browser Anda seperti yang dijelaskan pada button () on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Langkah 2 di atas. Klik OK untuk menyimpan pengaturan konfigurasi.

   4. Pilih konfigurasi yang baru dibuat dari daftar Pilih konfigurasi run/debug pada toolbar dan klik Run button () next to the list. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.

   5. Dalam jendela alat Debug , lanjutkan seperti biasa. menelusuri program, eksekusi program, memeriksanya saat ditangguhkan, melihat DOM HTML yang sebenarnya, menjalankan potongan kode JavaScript di Konsol, dan seterusnya. .

   Untuk contoh debug lainnya, lihat postingan berikut di blog WebStorm. Men-debug Aplikasi React dan Men-debug Aplikasi Angular

   Bagaimana cara men-debug kode PHP?

   Sesi Debugging .

   Mulai ide dan buka file yang berisi kode sumber yang ingin Anda debug

   Tetapkan breakpoint di setiap baris tempat Anda ingin debugger berhenti. .

   Di jendela Proyek, arahkan ke simpul proyek saat ini, klik tombol mouse kanan, dan pilih Debug dari menu popup

   Bagaimana cara menggunakan konsol PHP di Chrome?

   Untuk memulai, buka Google Chrome dan buka halaman web mana saja, klik kanan dan pilih Periksa untuk membuka Alat Pengembang Chrome. Konsol browser akan menjadi salah satu tab di Alat Pengembang. Dan Anda dapat mengujinya dengan menulis konsol JavaScript yang sama. perintah log

   Bagaimana cara mengaktifkan debugging di PHP?

   Pasang ekstensi PHP Debug . Klik "muat ulang" untuk memuat ulang Kode VS. Instal Xdebug. Ekstensi PHP Debug untuk VS Code hanyalah integrasi ke Xdebug.

   Bagaimana cara men-debug kode HTML di Chrome?

   Pemeriksa Web Chrome dan Debugger terpasang dengan nyaman di Chrome. Anda dapat meluncurkannya dengan menekan F12 saat berada di browser Anda atau dengan mengklik kanan halaman web dan memilih item menu Inspeksi . Gambar di bawah menunjukkan beberapa tampilan berbeda yang akan Anda lihat di browser Chrome DevTools.