3.3 給頁面添加測試腳本
在現實的工作中，我們往往會遇到一些問題在線上就會觸發然后本地就觸發不了的問題。或者是，要給某個元素寫一個測試腳本。這個時候如果是瀏覽器有提供一個添加腳本的功能的話，那么我們的整個操作就方便多了。具體操作如下：
我們先來給自己定一個需求，我們要在博客園的tab面板上面添加一個彈窗，彈窗的內容為1
這個時候的操作如下：首先先把面板切換到Sources，然后再右側中選中Snippets，接着點擊New snippet來，添加的腳本如下：
$(".post_nav_block").on("click","li",function(){
alert(1);
})
[觀察netWork中的加載，我們發現博客園使用了jquery，所以我們可以使用jquery的綁定事件，對於不存在jquery引入的網站，我們不能這樣使用]
編寫之后保存我們發現點擊之后沒有反應，其實這個腳本編寫之后是需要運行才能夠使用
右擊選擇run,只要不觸發頁面刷新，新加入的腳本是不會停止的，如果觸發刷新就會停止腳本的運行，但是腳本還是存在。即使你關閉了瀏覽器，下一次打開還是存在這個腳本，除非你刪除了這個腳本。
3.4 經典的斷點調試
相信很多前端人員都應該挺熟悉斷點調試的吧，不熟悉也沒有關系，我們來整理一下。首先我們自己編寫如下的一段測試代碼：
<html>
<script>
var a=1;
var b=2;
console.log(b);
console.log(a);
</script>
</html>
斷點如下：
如果我們要在斷點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>
然后在test3下面的console.log語句中打斷點。
我們看下右側的棧調用面板如下：
從而我們可以快速的定位到函數的棧調用情況
3.5 查看chrome插件的代碼
chrome中的source提供了一種可以查看插件代碼的功能，選中右側中的Content scripts就可以看到了，如下：
具體的代碼就可以將文件夾直接展開就可以了。
source模塊的用法大致上也就是這些了。下一節將講一講chrome對性能分析上面的利用。