VSCode boleh menyahpepijat penyemak imbas dengan lancar. Mari kita lihat analisis penggunaan dan prinsip!

VSCode Kemas kini epik, anda boleh nyahpepijat penyemak imbas dengan lancar. Artikel berikut akan membawa anda memahami fungsi ini, melihat cara menggunakannya, dan menganalisis secara ringkas prinsip ini. Saya harap ia akan membantu semua orang!

2021-07-16 Microsoft menerbitkan blog yang khusus memperkenalkan ciri ini, VSCODE hebat!

Sebelum ini, jika anda ingin menyahpepijat chrome atau edge dalam vscode, anda perlu menggunakan Chrome Debugger atau sambungan Microsoft Edge Debugger, dua sambungan vscode.

Dan yang lebih penting, ia hanya boleh menyediakan fungsi konsol yang paling asas seperti rangkaian dan elemen tidak boleh dilihat. [Pembelajaran yang disyorkan: "tutorial vscode"]

Apakah fungsi ini?

Selepas kemas kini, kami boleh terus open link dalam vscode chrome atau edge dan lengkapkan hampir semua fungsi penyahpepijatan biasa seperti elemen paparan, rangkaian, dsb. terus dalam vscode.

Tangkapan skrin kesan:

(edge ​​​​devtools)

(konsol nyahpepijat)

Cara menggunakan

Gunakan Kaedah ini sangat mudah Anda hanya perlu menekan F5 dalam projek bahagian hadapan untuk mencetuskan penyahpepijatan dan melakukan konfigurasi mudah. Berikut ialah konfigurasi lauch.json untuk semua orang Dengan itu, anda boleh terus membuka penyemak imbas penyahpepijatan.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Anda perlu mengubah suai parameter seperti url dan webRoot mengikut situasi anda sendiri.

Prinsip

Prinsipnya sebenarnya serupa dengan prinsip sambungan penyahpepijat krom. Ia juga berdasarkan protokol devtool Chrome untuk mewujudkan pautan websocket. Berinteraksi dengan menghantar data json berformat, supaya vscode boleh mendapatkan maklumat masa jalan secara dinamik. Contohnya, permintaan yang dihantar oleh urutan rangkaian penyemak imbas dan maklumat nod DOM.

Anda boleh mendapatkan banyak maklumat melalui protokol chrome devtool, seperti permintaan rangkaian yang dinyatakan di atas.

Memandangkan ia adalah pautan dua hala yang ditubuhkan oleh websocket, adalah mudah untuk menukar dom dalam VSCODE dan mencetuskan pengubahsuaian penyemak imbas. Kami hanya perlu beroperasi dalam VSCODE (pelanggan websocket) dan kemudian menghantar sekeping data JSON ke pelayar (pelayan websocket) melalui websocket. Penyemak imbas akan melakukan beberapa operasi berdasarkan data JSON yang diterima, dan kesannya tidak berbeza daripada operasi manual langsung pengguna dalam penyemak imbas.

Perlu diperhatikan bahawa terdapat banyak pelanggan untuk protokol chrome devtool, bukan sahaja pelanggan NodeJS, tetapi juga Python, Java, PHP dan pelanggan lain.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci VSCode boleh menyahpepijat penyemak imbas dengan lancar. Mari kita lihat analisis penggunaan dan prinsip!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!