如何使用chrome 開發者工具來調試程序

本篇文章為大家展示了如何使用chrome 開發者工具來調試程序，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

很多人看了我之前寫的文章，都說不會如何去調試，那今天就和大家分享是我如何去使用 chrome 開發者工具進行調試的。

先說明：以下內容均是我個人在使用開發者工具時自己探索的，相關的功能有可能說得不是很對，如果你發現我說錯了，歡迎指出！或者在評論區分享一些別的技巧。

1. 第一排按鈕

先說下這幾個按鈕，從左到右按順序：

1. 跳到下一個斷點處，如果后面沒有斷點了的話，就會停止調試

2. 不跳入函數內執行下一行代碼，當函數內部邏輯太多或者不重要的時候，可以使用這個

3. 向下執行一行代碼，會進入函數內部，需要理解函數內部的邏輯時候就可以使用這個

4. 跳出當前函數，當你所在的函數內部有循環或者突然覺得這函數可以跳過，就可以使用這個

5. 禁止所有斷點，不做任何調試，一般很少用

6. 程序運行到異常時是否中斷的開關，也很少用，我們一般調試別人的程序很少會有異常。

上面這幾個按鈕常用的就前面 5 個，對進行逆向 JS 時需要調試時非常重要，需要熟悉使用，當你掌握了如何去用的話，調試程序起來會得心應手。

2.  watch 和 call stack

這個用于監視變量的值的，比如在一段程序種，你需要關注哪個變量在什么時候變化了，就可以在這里點擊右上角的加號進行添加，來觀察在調試過程種這個變量的值。

上面這個是調用棧，特別重要。

用于查看 js 在執行過程種的調用棧，這個在我們尋找加密地方的時候就需要用到。比如我們在某個斷點處，看到我需要的參數已經生成了，這時候我們就可以查看調用棧，看看他前面的執行過程種是如何調用的，很容易就會找到生成的地方。

這個也是需要非常熟練的，自己多折騰一下就會了。

3.  xhr 斷點

這個是 xhr 斷點，當自己需要捕捉一些請求的時候，可以使用這個，懂得如何去使用，有時候對于查找加密生成地方會省很多力氣。不過需要配合上面的調用棧進行使用。

比如，我們在進行某個操作的時候，需要發送請求，嗯，比如點擊登陸或點擊鏈接，這些都會發送請求，如果你需要知道他們的參數的話，就可以在上面打個鉤，捕捉一下。說不定會有驚喜！

這個還可以選擇只捕捉指定域名的請求，但我沒有用過，所以在這里就不說了，一般全部捕捉就行了，因為我們如過捕捉到沒有用的請求，可以按下上面第一條所說的 第一個按鈕，就會跳到下一個 xhr斷點了。

4. 事件監聽

這個是用來監聽一些事件的，一般加密非常難的就會用到，我現在涉及到的還是很少，還有一些滑動驗證碼也會用到，里面就用到滑動監聽，還有一些點擊事件等。如果想要破解一些更加高深的網站的話，這個還是需要熟悉使用的，了解一下這些都是什么事件，當你在找加密地方找了很久都沒有頭緒的時候，都可以來這里看看，驚喜大大的。

5. 相關技巧

1）在找加密地方的時候，我們可以先來看看這里的調用棧

某乎登陸

上面這個就會有我們要找的參數的生成的地方，有時候，從這里開始尋找加密地方比較好突破，有時候會有太多調用棧，可能就不是很容易，不過也是一個突破口。

2）hook 一些 cookie

hook 按我的理解就是捕捉的意思，我們需要經常找一些 cookie 值得位置，就可以使用 hook來捕捉，怎么用呢？我也是向冷月大神學習的，這里先獻上大佬博客再說：https://lengyue.me/

這里使用的是油猴腳本，一個插件來的，下載地址：http://www.tampermonkey.net/

安裝后點擊插件選擇添加腳本，然后把這段代碼添加到上面即可

需要獲得完整代碼在公眾號 「日常學python」后臺回復 hook 獲取

接下來就是開啟這個腳本進行 hook 了

就比如我們之前的努比亞論壇的cookie 

上述內容就是如何使用chrome 開發者工具來調試程序，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。