在現(xiàn)實(shí)的工作中，我們往往會(huì)遇到一些問(wèn)題在線上就會(huì)觸發(fā)然后本地就觸發(fā)不了的問(wèn)題。或者是，要給某個(gè)元素寫一個(gè)測(cè)試腳本。這個(gè)時(shí)候如果是瀏覽器有提供一個(gè)添加腳本的功能的話，那么我們的整個(gè)操作就方便多了。具體操作如下：
我們先來(lái)給自己定一個(gè)需求，我們要在博客園的tab面板上面添加一個(gè)彈窗，彈窗的內(nèi)容為1
這個(gè)時(shí)候的操作如下：首先先把面板切換到Sources，然后再右側(cè)中選中Snippets，接著點(diǎn)擊New snippet來(lái)，添加的腳本如下：
$(".post_nav_block").on("click","li",function(){ alert(1);})
[觀察netWork中的加載，我們發(fā)現(xiàn)博客園使用了jquery，所以我們可以使用jquery的綁定事件，對(duì)于不存在jquery引入的網(wǎng)站，我們不能這樣使用]
編寫之后保存我們發(fā)現(xiàn)點(diǎn)擊之后沒(méi)有反應(yīng)，其實(shí)這個(gè)腳本編寫之后是需要運(yùn)行才能夠使用
右擊選擇run,只要不觸發(fā)頁(yè)面刷新，新加入的腳本是不會(huì)停止的，如果觸發(fā)刷新就會(huì)停止腳本的運(yùn)行，但是腳本還是存在。即使你關(guān)閉了瀏覽器，下一次打開還是存在這個(gè)腳本，除非你刪除了這個(gè)腳本。
相信很多前端人員都應(yīng)該挺熟悉斷點(diǎn)調(diào)試的吧，不熟悉也沒(méi)有關(guān)系，我們來(lái)整理一下。首先我們自己編寫如下的一段測(cè)試代碼：
<html> <script> var a=1; var b=2; console.log(b); console.log(a); </script></html>
斷點(diǎn)如下：
如果我們要在斷點(diǎn)3調(diào)到斷點(diǎn)5，不經(jīng)過(guò)斷點(diǎn)4的話，我們可以使用左側(cè)的按鈕
如果要分別一次進(jìn)行下去，只需要按下F10
如果有函數(shù)的話，要運(yùn)行到函數(shù)內(nèi)部，可以使用F11
其中是用來(lái)開啟和關(guān)閉斷點(diǎn)，當(dāng)關(guān)閉斷點(diǎn)后，所有的斷點(diǎn)都會(huì)失效
選中變量，右擊菜單選擇Add selected text to watches把變量添加到右側(cè)的watch面板，這樣可以監(jiān)控一個(gè)變量的當(dāng)前情況。
重新編寫一段測(cè)試代碼：
<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語(yǔ)句中打斷點(diǎn)。
我們看下右側(cè)的棧調(diào)用面板如下：
從而我們可以快速的定位到函數(shù)的棧調(diào)用情況
chrome中的source提供了一種可以查看插件代碼的功能，選中右側(cè)中的Content scripts就可以看到了，如下：
具體的代碼就可以將文件夾直接展開就可以了。
source模塊的用法大致上也就是這些了。下一節(jié)將講一講chrome對(duì)性能分析上面的利用。
chrome調(diào)試工具高級(jí)不完整使用指南（基礎(chǔ)篇）
chrome調(diào)試工具高級(jí)不完整使用指南（優(yōu)化篇）
chrome調(diào)試工具高級(jí)不完整使用指南（實(shí)戰(zhàn)一）
chrome調(diào)試工具高級(jí)不完整使用指南（實(shí)戰(zhàn)二）
聯(lián)系客服
