Analisis ringkas kaedah dan teknik penyahpepijatan JavaScript_teknik javascript

Javascript, disingkatkan sebagai JS, ialah bahasa pembangunan bahagian hadapan halaman web dan berjalan terus pada penyemak imbas Semasa saya mula mempelajarinya, saya tidak memahaminya, jadi setiap kali saya membangunkan atau menyahpenyahnya, saya melakukannya dalam vs.net , Memikirkannya sekarang, ia benar-benar menyakitkan, sebenarnya, JS dilaksanakan dalam penyemak imbas, bukan pada pelayan, jadi anda tidak perlu melakukannya dalam perisian pembangunan web ia terus dalam penyemak imbas

Alat Pembangun Penyemak Imbas

Kegemaran peribadi saya ialah Alat Pembangun Chrome. Walaupun Safari dan Firefox tidak dapat memenuhi standard Chrome yang tinggi, ia beransur-ansur bertambah baik. Dalam Firefox, anda boleh menggunakan Firebug dan Alat Pembangun Firefox bersama-sama. Jika pasukan Firefox terus cemerlang dalam menambah baik alat pembangun terbina dalam, Firebug mungkin suatu hari nanti akan menjadi usang.

Keutamaan peribadi diketepikan, anda sepatutnya boleh mencuba dan menyahpepijat kod sewenang-wenangnya dalam penyemak imbas sasaran. Penyemak imbas sasaran anda mungkin atau mungkin tidak termasuk IE8 yang terkenal.

Kenal dengan alat pembangun pilihan anda. Anda juga boleh mendapatkan sokongan penyahpepijatan tambahan daripada IDE (Persekitaran Pembangunan Bersepadu) atau perisian pihak ketiga.

Dalam pelbagai alat penyahpepijatan, pengetahuan asas penyahpepijatan adalah sama. Malah, saya mempelajari asas penyahpepijatan daripada persekitaran pembangun C Borland pada tahun 90-an. Titik putus dan syarat Titik putus dan pemantauan adalah sama seperti versi alat pembangun Chrome yang terkini. Sekitar tahun 2000, saya mendapat pengecualian pertama saya di Jawa. Konsep surih tindanan masih digunakan, dan walaupun terminologi JavaScript merujuknya sebagai Ralat, memeriksa surih tindanan masih berguna seperti biasa.

Sesetengah mata pengetahuan adalah unik untuk pembangunan bahagian hadapan. Contohnya:

Pemeriksaan DOM
Titik putus DOM
Peristiwa nyahpepijat
Analisis kebocoran ingatan
Titik putus

Gunakan pernyataan penyahpepijat untuk menambah titik putus dalam kod sumber. Setelah pernyataan penyahpepijat dicapai, pelaksanaan terganggu. Konteks skop semasa muncul dalam konsol, bersama dengan semua pembolehubah tempatan dan global. Gerakkan kursor tetikus ke atas pembolehubah untuk melihat nilainya.

Anda juga boleh membuat titik putus bersyarat dalam kod anda:

JavaScript

if (condition) {
  debugger;
}

Anda juga boleh memasukkan titik putus dan titik putus bersyarat dalam alatan pembangun mengikut keperluan anda. Dalam alat pembangun Chrome, klik nombor baris dalam paparan Sumber untuk menambah titik putus. Anda juga boleh menambah keadaan titik putus jika anda klik kanan pada titik putus dan pilih "Edit Titik Putus".

Titik putus untuk perubahan nod

Jika tugas anda adalah untuk nyahpepijat kod sampah, anda mungkin mempunyai soalan ini: Mengapa nod DOM berubah semasa pelaksanaan. Alat pembangun Chrome menyediakan titik putus yang mudah yang boleh digunakan untuk mengesan perubahan nod dalam pepohon elemen.

Dalam paparan Elemen, klik kanan elemen dan pilih "Hentikan..." daripada menu klik kanan.

Jenis titik putus DOM mungkin termasuk:

Perubahan nod dalam subpokok nod yang dipilih,
Sifat nod yang dipilih berubah,
Nod dipadamkan.

Elakkan pengelogan jenis rujukan

Apabila merakam objek atau tatasusunan, nilai jenis primitif mungkin berubah dalam rekod objek rujukan. Apabila melihat jenis rujukan adalah penting untuk diingat bahawa pelaksanaan kod semasa rakaman dan tontonan boleh menjejaskan hasil yang diperhatikan.

Sebagai contoh, laksanakan kod berikut dalam Alat Pembangun Chrome:

JavaScript

var wallets = [{ amount: 0 }];
setInterval( function() {
  console.log( wallets, wallets[0], wallets[0].amount );
  wallets[0].amount += 100;
}, 1000 );

Nilai direkodkan bagi atribut kedua dan ketiga adalah betul, tetapi nilai rujukan objek dalam atribut pertama tidak boleh dipercayai. Nilai medan amaun sudah ditentukan apabila anda mula-mula memaparkan sifat ini dalam alat pembangun. Tidak kira berapa kali anda menutup dan membuka semula rujukan yang sama, nilai ini tidak akan berubah.

Jenis Rujukan Rekod

Sentiasa ingat apa yang anda rakam. Apabila mengelog jenis primitif, gunakan ungkapan jam tangan dengan titik putus. Jika itu kod tak segerak, elakkan daripada mendokumentasikan jenis rujukan.

Rekod jadual

Dalam sesetengah alat pembangun, anda boleh menggunakan console.table untuk merakam tatasusunan objek dalam konsol.

Cuba laksanakan kod berikut dalam alat pembangun Chrome anda:

JavaScript

console.table(
  [
    { 
      id: 1, 
      name: 'John', 
      address: 'Bay street 1'
    }, 
    {
      id: 2, 
      name: 'Jack', 
      address: 'Valley road 2.'
    }, 
    {
      id: 3, 
      name: 'Jim', 
      address: 'Hill street 3.' 
    }
  ] );

输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此， console.table 只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击 + 图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。

事件监听器断点

Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。

异常时暂停

Chrome开发者工具可以在抛出异常时暂停 执行 JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。

 

异常时暂停

Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。

如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试 技巧教给你 的同事。

Paul Irish发布过一些基本的 调试代码片段 ，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是 很有价值的 。

在函数执行前插入断点

如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试 f 函数，用 debug(f) 语句可以增加这种断点。

Unminify最小化代码

（ 译者注：unminify 解压缩并进行反混淆 ）

尽可能使用 source map。有时生产代码 不能使用 source map，但不管怎样，你都  不应该直接对生产代码进行调试 。

（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）

如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮 {} 位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。

格式化按钮只有在不得已时才会使用。从某种意义上来说， 丑代码就是难看，因为代码中的命名没有明确的语义 。

DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了 A 元素、 B 元素和 C 元素，

$0   表示 C 元素
$1 表示 B 元素
$2 表示 A 元素

如果你又选择了元素 D ，那么 $0 、 $1 、 $2 和 $3 分别代表 D 、 C 、 B 和 A 。

访问调用栈

JavaScript

var f = function() { g(); } 
var g = function() { h(); }
var h = function() { console.trace('trace in h'); }
f();

Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

性能审查

性能 审查 工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显著优化。

审查工具举例：

Chrome开发者工具的Audit标签页
YSlow

熟能生巧

你可能熟悉某些调试技巧，其他 技巧 也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。