西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
谷歌瀏覽器
專區(qū)首頁使用教程其他平臺(tái)軟件資訊破解版

首頁安卓游戲資訊安卓游戲攻略 → 谷歌瀏覽器開發(fā)調(diào)試工具中Sources面板 js調(diào)試等 完全介紹

谷歌瀏覽器開發(fā)調(diào)試工具中Sources面板 js調(diào)試等 完全介紹

相關(guān)軟件相關(guān)文章發(fā)表評論 來源:西西整理時(shí)間:2015/6/23 8:50:35字體大小:A-A+

作者:西西點(diǎn)擊:4268次評論:0次標(biāo)簽: 谷歌瀏覽器

谷歌瀏覽器2017(Chrome)v58.0.3029.81 官方正式版
  • 類型:瀏覽器類大。41.8M語言:中文 評分:9.8
  • 標(biāo)簽:
立即下載

這次分享的是Chrome開發(fā)工具中最有用的面板Sources。 Sources面板幾乎是我最常用到的Chrome功能面板,也是在我看來決解一般問題的主要功能面板。通常只要是開發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問題,在審視一遍自己的代碼而一無所獲之后,我首先就會(huì)打開Sources進(jìn)行js斷點(diǎn)調(diào)試,而它也幾乎能解決我80%的代碼問題。Js斷點(diǎn)這個(gè)功能讓人興奮不已,在沒有js斷點(diǎn)功能,只能在IE(萬惡的IE)中靠alert彈出窗口調(diào)試js代碼的時(shí)代(特別alert一個(gè)object根本不會(huì)理你),那樣的開發(fā)環(huán)境對于前端程序員來說簡直是一場噩夢。本篇文章講會(huì)介紹Sources的具體用法,幫助各位在開發(fā)過程中夠愉快地調(diào)試js代碼,而不是因它而發(fā)瘋。首先打開F12開發(fā)工具切換到Sources面板中:

Sources功能面板是資源面板,他主要分為四個(gè)部分,四個(gè)部分并不是獨(dú)立的,他們互相關(guān)聯(lián),互動(dòng)共同實(shí)現(xiàn)一個(gè)重要的功能:監(jiān)控js在執(zhí)行期的活動(dòng)。簡單來說就是斷點(diǎn)啦。

谷歌瀏覽器2015最新版下載:http://elephantinaurance.com/soft/2349.html

首先我們來看區(qū)域1,它的功能有些類似于Resources面板,主要是顯示網(wǎng)頁加載的腳本文件:例如css, js等資源文件(它不包含cookie,img等靜態(tài)資源文件)。

區(qū)域1的導(dǎo)航條上有三個(gè)tab切換選項(xiàng),他們都存有不同域名和環(huán)境下的js和css文件,我們首先來說明Sources(資源)選項(xiàng)的作用:

Sources: 包含該項(xiàng)目的靜態(tài)資源文件。雙擊選中文件,該文件內(nèi)容會(huì)在區(qū)域2中顯示,如果你選中的是js文件,那么你可以在區(qū)域2種單擊行號進(jìn)行斷點(diǎn)調(diào)試,只要js執(zhí)行到了你所標(biāo)記的這一行,它會(huì)停止向下執(zhí)行并且等待你的命令:

從上圖可以看到j(luò)s執(zhí)行到斷點(diǎn)處時(shí)各個(gè)區(qū)域的變化,首先是區(qū)域3中的Breakpoints記錄信息會(huì)變高亮,然后是區(qū)域4中Scope 選項(xiàng)中列出了斷點(diǎn)處私有和公有的變量信息,這樣,我可以很直觀地知道,此時(shí)此刻js的執(zhí)行狀態(tài)。同樣的,你可以把鼠標(biāo)放到區(qū)域2種的某個(gè)變量上,瀏覽器會(huì)彈出一個(gè)小框框,框框里面則是你懸浮其上的變量所有信息:

   然后,你可以按F10跟著js執(zhí)行的路徑一步一步地走下去,如果你遇到了一個(gè)函數(shù)包含著另外一個(gè)函數(shù),那么你可以按F11進(jìn)入到個(gè)函數(shù)中去觀察它的代碼執(zhí)行活動(dòng)。你也可以通過點(diǎn)擊區(qū)域1底部的各個(gè)圖標(biāo)對js代碼進(jìn)行跟蹤。不過我建議你使用快捷鍵,故名思義,因?yàn)樗容^快捷方便。不過怎么用完全按照個(gè)人習(xí)慣來吧。下圖是各個(gè)按鈕的作用功能。

在上圖藍(lán)色圓圈中數(shù)字,它們分別代表:

1、停止斷點(diǎn)調(diào)試

2、不跳入函數(shù)中去,繼續(xù)執(zhí)行下一行代碼(F10)

3、跳入函數(shù)中去(F11)

4、從執(zhí)行的函數(shù)中跳出

5、禁用所有的斷點(diǎn),不做任何調(diào)試

6、程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開關(guān)

接下來在區(qū)域4種切換到Watch Expressions 選項(xiàng),它的作用是為目前斷點(diǎn)添加表達(dá)式,使得每次斷點(diǎn)往下走一步都會(huì)執(zhí)行你寫下的js代碼。需要注意的是這個(gè)功能必須謹(jǐn)慎使用,因?yàn)檫@可能會(huì)導(dǎo)致你寫下的監(jiān)控代碼段會(huì)不斷地被執(zhí)行。

為了避免你的調(diào)試代碼重復(fù)執(zhí)行,我們可以在調(diào)試時(shí)直接在console控制臺(tái)上一次性地輸出當(dāng)前斷點(diǎn)處的信息(推薦這樣做)。為了驗(yàn)證我們在console面板中擁有的是當(dāng)前斷點(diǎn)環(huán)境,我門可以對比斷點(diǎn)執(zhí)行前后的this值變化。

如果你覺得在斷點(diǎn)的時(shí)候?yàn)榱丝匆粋(gè)變量必須借用console面板輸出的方式來查看會(huì)比較麻煩,那么你可以更新最新版的Chrome,它已經(jīng)為我們解決了這個(gè)煩惱。為了方便開發(fā)者調(diào)試,在這一點(diǎn)上谷歌已經(jīng)做到了極致,就在前幾天更新過Chrome以后,鹵煮意外地發(fā)現(xiàn)了斷點(diǎn)時(shí)監(jiān)控環(huán)境變量的另外一種方式,這種方式極為清晰,在斷點(diǎn)調(diào)試的時(shí)候,區(qū)域2中會(huì)自動(dòng)顯示每個(gè)變量的值,每次代碼往下走的時(shí)候這個(gè)值都回時(shí)時(shí)更新。這讓開發(fā)者對當(dāng)前環(huán)境變量幾乎可以說是一目了然。(此功能有一個(gè)小缺陷,那就是無法查看數(shù)組或者對象的具體索引和值,不過我相信google會(huì)改進(jìn)它的。)

當(dāng)你的項(xiàng)目已經(jīng)線上,出現(xiàn)了一個(gè)bug,你修復(fù)了之后無法看到它真正在線上的效果,那么你可以在打開線上的項(xiàng)目,直接在瀏覽器中修改代碼然后看到效果。這樣的效果往往是最直接的,這種方法也能幫你省去頻繁驗(yàn)證發(fā)布的麻煩,畢竟身為前端碼農(nóng)的你也一定會(huì)聽到過后臺(tái)(通常情況下是后臺(tái)發(fā)布)大哥的抱怨:“XXX,測試通過了沒,不要出現(xiàn)了哈,發(fā)布一次很麻煩的!”。而在Chrome里面,只需要在區(qū)域2種直接修改,你就可以驗(yàn)證你的代碼在線上是否可行。鹵煮在此處只是指出該功能的用法之一。其他的就憑諸位的聰明才智去想了。

即使在斷點(diǎn)時(shí),你也可以編輯代碼,按ctrl+S保存之后,你會(huì)看到區(qū)域2的背景由白色變?yōu)闇\色,而斷點(diǎn)會(huì)重新開始執(zhí)行。

回到區(qū)域1,Content script 選項(xiàng)開里面包含著一些第三方插件或者瀏覽器自身的js代碼,經(jīng)常它是被忽略的,實(shí)際上它的作用很少。我們可以更多關(guān)注一下Snippets選項(xiàng)。還記得基礎(chǔ)篇里面介紹的style嗎?在里面我們可以編輯界面的css代碼并且即時(shí)看到它們的映射效果,同樣地,在Sinppets中,我們也 可以編輯(重寫)js代碼片段。這些片段實(shí)際上就相當(dāng)于你的js文件一樣,不同的是本地的js文件在編輯器里面編輯的,而此處,你是在瀏覽器中編寫的。這些代碼片段在瀏覽器刷新的時(shí)候既不會(huì)消失,也不會(huì)執(zhí)行,除非是你手動(dòng)執(zhí)行它。它可以存在你的本地瀏覽器中,即使關(guān)閉瀏覽器,再次打開時(shí)它依然還在那里。它的主要作用可以使得我們編寫一些項(xiàng)目的測試代碼時(shí)提供便捷,你知道,如果你在編輯器上編寫這些代碼,在發(fā)布時(shí)你必須為它們添加注釋符號或者手動(dòng)刪除它們,而在瀏覽器上編寫就不需要這樣繁瑣了。

在Snippets選項(xiàng)的空白處右鍵后選擇彈出的new選項(xiàng),建立一個(gè)你自己的新的文件,然后在區(qū)域2種編輯它。

Snippets 的非常功能強(qiáng)大,它的許多隱藏功能還有待發(fā)掘。目前鹵煮使用它是在記住調(diào)試片段、單元測試、少量的功能代碼編寫功能上。

最后我們看看js中時(shí)間豐富的監(jiān)控功能,同上篇文章介紹的一樣,Sources面板和Elements面板一樣有監(jiān)控事件的功能,而且Sources中功能更加豐富,也更加強(qiáng)大。它的這部分功能集中在區(qū)域3中。我以下圖為例,觀察其作用。

從上到下,紫色圈內(nèi)的數(shù)字的意義:

1、斷點(diǎn)處的債堆棧,就是從該函數(shù)起,逐級追尋調(diào)用到他的函數(shù)名。例如:

function a () {   b(); } function b() {   c();   } function c() {  //在該處斷點(diǎn),查看call stack   } a->b->c. call stack 從上到下的順序就是 c b a

2、在區(qū)域2中你的斷點(diǎn)調(diào)試信息。當(dāng)某個(gè)斷點(diǎn)在執(zhí)行的時(shí)候?qū)?yīng)的信息會(huì)高亮,雙擊該處信息可以在區(qū)域2中快速定位。

3、添加的Dom監(jiān)控信息。

4、擊+ 并輸入 URL 包含的字符串即可監(jiān)聽該 URL 的 Ajax 請求,輸入內(nèi)容就相當(dāng)于 URL 的過濾器。如果什么都不填,那么就監(jiān)聽所有 XHR 請求。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷。

5、為網(wǎng)頁添加各種類型的斷點(diǎn)信息。如選中了Mouse中的某一項(xiàng)(click),當(dāng)你在網(wǎng)頁上出發(fā)這個(gè)動(dòng)作(單擊網(wǎng)頁任意地方),你瀏覽器就是立刻斷點(diǎn)監(jiān)控該事件。

值得再次重復(fù)一遍,Sources是一般的功能開發(fā)中最常用到也是最有用的功能面板,它里面的許多功能對于我們開發(fā)前端工程來說是非常有幫助的。在web2.0時(shí)代的今天,我不推薦依然在自己的代碼里面寫調(diào)試信息的行為,因?yàn)檫@會(huì)然你的開發(fā)變得繁瑣。Chrome開發(fā)工具給我們提供的強(qiáng)大功能,我們應(yīng)該好好利用之。這篇文章就到此結(jié)束,雖然有點(diǎn)繁瑣,但總算基本表述了鹵煮使用經(jīng)驗(yàn)和想法,希望對你有幫助。如果你覺得不錯(cuò),請推薦一下本文并繼續(xù)關(guān)注鹵煮在的博客。在下一篇中我將向大家介紹Chrome開發(fā)工具中的性能方面的調(diào)試。

    火狐瀏覽器
    (92)火狐瀏覽器
    火狐瀏覽器安卓版功能特性★快速:-快速瀏覽:從啟動(dòng)到頁面加載,到平移和縮放,都有超快的瀏覽體驗(yàn)-智能工具欄:輕點(diǎn)智能工具欄,即可獲得經(jīng)常訪問的網(wǎng)站列表,書簽和歷史記錄,點(diǎn)擊訪問,無需輸入-便捷:簡潔易用標(biāo)簽頁便于您同時(shí)瀏覽多個(gè)站點(diǎn)-加載項(xiàng):提供無圖閱讀模式,流量受限時(shí)啟用也能便捷查看網(wǎng)頁★智能:-同步:從任何裝置存取您瀏覽器的歷史紀(jì)錄,書簽,密碼,以及開啟的標(biāo)簽頁-閱讀:自動(dòng)將零散的文章組合成美觀易讀的頁面...更多>>
    • IE10(Internet Explorer 10 for Wi

      11-16 / 21.7M

      推薦理由:微軟已經(jīng)正式發(fā)布nternet Explorer 10 for Windows 7,這一版本讓W(xué)indows 7用戶等待了好久。之前IE10一直僅
    • 谷歌瀏覽器2017(Chrome)v58.0.3029

      04-20 / 41.8M

      推薦理由:谷歌瀏覽器GoogleChrome將簡約的界面設(shè)計(jì)與先進(jìn)的技術(shù)相融合,谷歌瀏覽器官方下載讓網(wǎng)絡(luò)瀏覽變得更快速、安
    • ie11 64位 for win7官方正式版

      01-29 / 87.2M

      推薦理由:ie11 win7 64位官方正式版適用于win7 64位的系統(tǒng)。微軟為IE11添加了一些新特性,比如對WebGL的支持,以及對
    • 百度瀏覽器2017V8.7.5000.4830 官方

      04-10 / 51.1M

      推薦理由:百度瀏覽器的使命是讓人們更流暢的上網(wǎng)、更愉悅的在線生活。通過百度的開放整合和精準(zhǔn)識別,百度瀏覽器2017
    • 360極速瀏覽器8.7.0.208 官方正式版

      03-27 / 39.4M

      推薦理由:360極速瀏覽器7.3Beta版火速上線,國內(nèi)率先更新chrome26內(nèi)核的雙核瀏覽器!7.3版本基于chrome26正式版內(nèi)核開
    • 獵豹安全瀏覽器v6.0.114.14266官方

      04-28 / 53.9M

      推薦理由:獵豹瀏覽器是首款雙核安全瀏覽器,更安全,更快速,更炫酷.獵豹首創(chuàng)BIPS安全體系和網(wǎng)購敢賠服務(wù),安全防護(hù)更全面
    ie瀏覽器
    (45)ie瀏覽器
    西西軟件園提供好用的IE瀏覽器官方下載,包括IE6、IE7、IE8、IE9、IE10、IE11,IE瀏覽器真的是越來越強(qiáng)大了,界面極其清爽、簡潔;新增網(wǎng)頁固定功能;智能網(wǎng)址地址欄;快速訪問入口;獨(dú)立標(biāo)簽頁;下載管理器;開發(fā)人員工具;多功能地址欄;加載管理和跟蹤保護(hù)功能;支持HTML5和GPU加速功能。...更多>>
    • IE10預(yù)覽版官方第四版

      02-15 / 19.5M

      推薦理由:IE10平臺(tái)預(yù)覽版第四版(PP4),使得IE瀏覽器的靈活性得到進(jìn)一步增強(qiáng)。新版IE10在HTML5技術(shù)上帶來了相當(dāng)大的
    • IE8 (Internet Explorer 8) For XP

      05-15 / 16M

      推薦理由:微軟全新推出的最新版本網(wǎng)頁瀏覽器IE8(InternetExplorer8)。新增功能如下:一、新增網(wǎng)絡(luò)互動(dòng)功能可以摘取網(wǎng)
    • IE10(Internet Explorer 10 for Wi

      11-16 / 21.7M

      推薦理由:微軟已經(jīng)正式發(fā)布nternet Explorer 10 for Windows 7,這一版本讓W(xué)indows 7用戶等待了好久。之前IE10一直僅
    • 谷歌瀏覽器2017(Chrome)v58.0.3029

      04-20 / 41.8M

      推薦理由:谷歌瀏覽器GoogleChrome將簡約的界面設(shè)計(jì)與先進(jìn)的技術(shù)相融合,谷歌瀏覽器官方下載讓網(wǎng)絡(luò)瀏覽變得更快速、安
    • ie11 64位 for win7官方正式版

      01-29 / 87.2M

      推薦理由:ie11 win7 64位官方正式版適用于win7 64位的系統(tǒng)。微軟為IE11添加了一些新特性,比如對WebGL的支持,以及對
    • 百度瀏覽器2017V8.7.5000.4830 官方

      04-10 / 51.1M

      推薦理由:百度瀏覽器的使命是讓人們更流暢的上網(wǎng)、更愉悅的在線生活。通過百度的開放整合和精準(zhǔn)識別,百度瀏覽器2017
    opera瀏覽器
    (41)opera瀏覽器
    目前市場上的安卓瀏覽器種類繁多,不過有一款瀏覽器卻一直活躍在安卓系統(tǒng)上,那就是歐朋瀏覽器。歐朋瀏覽器是全球最流行的手機(jī)瀏覽器Opera的中文版本。歐朋手機(jī)瀏覽器基于OperaMini開發(fā),延續(xù)OperaMini小巧、快速、節(jié)省流量的優(yōu)點(diǎn),同時(shí)集成了諸多貼近中國用戶的社會(huì)化應(yīng)用。歐朋瀏覽器最大的特色就是快,與同類產(chǎn)品相比優(yōu)勢比較明顯。體積小,適應(yīng)性好,同時(shí)支持智能/非智能手機(jī)。歐朋瀏覽器特點(diǎn):歐朋瀏覽器支持智能預(yù)讀、智能縮...更多>>
    • Opera Next最新版v25.0.1614.68官方

      03-26 / 29.7M

      推薦理由:Opera Next 是 Opera 最新推出的基于 Chromium 內(nèi)核的瀏覽器,瀏覽器排版引擎由原先的 Presto 更換為高性能
    • ie8.0瀏覽器 FoR Xp(win 2003)官方

      05-15 / 15.7M

      推薦理由:微軟全新推出的最新版本網(wǎng)頁瀏覽器IE8(InternetExplorer8),是xp系統(tǒng)能使用的IE最新版,更新版本IE9、IE10微
    • 歐朋瀏覽器(Opera Mini)v12.2.0.8官

      11-09 / 3.2M

      推薦理由:operamini,是全球最受歡迎的手機(jī)瀏覽器,小編本人也在使用中,確實(shí)好用哈~能在大幅提升瀏覽速度的同時(shí)將流
    • 歐朋瀏覽器java通用版v6.7 官方版

      05-16 / 328KB

      推薦理由: 歐朋瀏覽器java通用版~~~ opera mini大家都知道把!!!大名鼎鼎的挪威瀏覽器巨頭opera推出的手機(jī)版瀏覽
    • 歐朋瀏覽器V12.6.0.5 安卓版

      03-09 / 3.7M

      推薦理由:歐朋瀏覽器forandroid針對移動(dòng)設(shè)備與個(gè)人電腦之間的隔閡,發(fā)布了最新版本,全面支持手機(jī)與電腦之間個(gè)人信息
    • 歐朋瀏覽器黑莓版7.5 中文版

      10-31 / 2KB

      推薦理由:歐朋瀏覽器黑莓版 歐朋也就是著名的挪威瀏覽器opera,針對黑莓blackberry手機(jī)優(yōu)化過的版本 讓www電腦網(wǎng)頁
    瀏覽器2016
    (45)瀏覽器2016
    西西軟件園強(qiáng)力推薦的瀏覽器下載排行榜2014產(chǎn)品,目前市場上的瀏覽器產(chǎn)品眾多,大家可能會(huì)有選擇性困難,到底哪款瀏覽器速度最快,體驗(yàn)最好最安全?這些都是在使用瀏覽器當(dāng)中常見的疑問,如何選擇一款最好的瀏覽器,其實(shí)最適合的就是最好的。火狐瀏覽器是一個(gè)完全開放源代碼,任何人都可以自由參與開發(fā)的,支持多種操作系統(tǒng)的瀏覽器,因?yàn)槠鋸?qiáng)大的可定制性和豐富的擴(kuò)展程序而成為最有個(gè)性的瀏覽器.Firefox和Opera支持最好,彈窗攔截Fi...更多>>
    • IE8 (Internet Explorer 8) For XP

      05-15 / 16M

      推薦理由:微軟全新推出的最新版本網(wǎng)頁瀏覽器IE8(InternetExplorer8)。新增功能如下:一、新增網(wǎng)絡(luò)互動(dòng)功能可以摘取網(wǎng)
    • 360安全瀏覽器2017V8.1.1.400 官方

      04-17 / 47.3M

      推薦理由:360安全瀏覽器是很適合大眾使用的一款新一代瀏覽器,擁有全國最大的惡意網(wǎng)址庫,采用惡意網(wǎng)址攔截技術(shù),可自
    • 世界之窗瀏覽器7.0.0.1.06 官方最新

      03-22 / 19.6M

      推薦理由:世界之窗瀏覽器6.0的特點(diǎn):首先精簡內(nèi)核,做到比Chrome更快!當(dāng)下,一款瀏覽器要在速度上做到極致,一顆包含
    • 超速瀏覽器5.2 官方正式版

      09-04 / 1.9M

      推薦理由:超速瀏覽器是一款小巧快速、 安全穩(wěn)定、功能貼心的綠色瀏覽器,它完全免費(fèi)沒有任何功能限制。 超速瀏覽器功
    • IE10(Internet Explorer 10 for Wi

      11-16 / 21.7M

      推薦理由:微軟已經(jīng)正式發(fā)布nternet Explorer 10 for Windows 7,這一版本讓W(xué)indows 7用戶等待了好久。之前IE10一直僅
    • 谷歌瀏覽器2017(Chrome)v58.0.3029

      04-20 / 41.8M

      推薦理由:谷歌瀏覽器GoogleChrome將簡約的界面設(shè)計(jì)與先進(jìn)的技術(shù)相融合,谷歌瀏覽器官方下載讓網(wǎng)絡(luò)瀏覽變得更快速、安
    搜狗瀏覽器
    (76)搜狗瀏覽器
    搜狗瀏覽器是搜狗公司推出的國內(nèi)首款集高速的WebKit內(nèi)核(谷歌Chrome瀏覽器內(nèi)核)與兼容的Trident內(nèi)核(微軟IE瀏覽器內(nèi)核)于一身的雙核高速瀏覽器。最新推出的搜狗高速瀏覽器4.0正式版具有具有超高速,超兼容,超安全的特點(diǎn)。搜狗瀏覽器還具有擴(kuò)展功能,涵蓋了從工作學(xué)習(xí)、生活服務(wù)、系統(tǒng)工具、時(shí)尚休閑、資訊閱讀到影音視頻、游戲娛樂7大類1000余款擴(kuò)展。更有包括12306登錄助手、如意淘、微信搖一搖傳圖等特色擴(kuò)展。搜狗12306助手...更多>>

    相關(guān)評論

    閱讀本文后您有什么感想? 已有人給出評價(jià)!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)