chrome調試工具高級不完整使用指南（實戰二）

時間 2019-11-06

原文原文鏈接

3.3 給頁面添加測試腳本

在現實的工做中，咱們每每會遇到一些問題在線上就會觸發而後本地就觸發不了的問題。或者是，要給某個元素寫一個測試腳本。這個時候若是是瀏覽器有提供一個添加腳本的功能的話，那麼咱們的整個操做就方便多了。具體操做以下：html

咱們先來給本身定一個需求，咱們要在博客園的tab面板上面添加一個彈窗，彈窗的內容爲1前端

這個時候的操做以下：首先先把面板切換到Sources，而後再右側中選中Snippets，接着點擊New snippet來，添加的腳本以下：jquery

$(".post_nav_block").on("click","li",function(){
    alert(1);
})

[觀察netWork中的加載，咱們發現博客園使用了jquery，因此咱們可使用jquery的綁定事件，對於不存在jquery引入的網站，咱們不能這樣使用]chrome

編寫以後保存咱們發現點擊以後沒有反應，其實這個腳本編寫以後是須要運行纔可以使用瀏覽器

右擊選擇run,只要不觸發頁面刷新，新加入的腳本是不會中止的，若是觸發刷新就會中止腳本的運行，可是腳本仍是存在。即便你關閉了瀏覽器，下一次打開仍是存在這個腳本，除非你刪除了這個腳本。函數

3.4 經典的斷點調試

相信不少前端人員都應該挺熟悉斷點調試的吧，不熟悉也沒有關係，咱們來整理一下。首先咱們本身編寫以下的一段測試代碼：工具

<html>
    <script>
        var a=1;
        var b=2;
        console.log(b);
        console.log(a);
    </script>
</html>

斷點以下：post

若是咱們要在斷點3調到斷點5，不通過斷點4的話，咱們可使用左側的按鈕性能

若是要分別一次進行下去，只須要按下F10測試

若是有函數的話，要運行到函數內部，可使用F11

其中是用來開啓和關閉斷點，當關閉斷點後，全部的斷點都會失效

選中變量，右擊菜單選擇Add selected text to watches把變量添加到右側的watch面板，這樣能夠監控一個變量的當前狀況。

從新編寫一段測試代碼：

 <script>
        test1();
        function test1(){
            test2();
        }
        function test2(){
            test3("this is test");
        }
        function test3(params) {
            console.log(params);
        }
        var a=1;
        alert(a);
    </script>