咨詢,就免費贈送域名與服務器,咨詢熱線:15087443553當前位置: 主頁 > 建站知識 > 網站設計知識 >
推薦內容
聯系我們
電話咨詢:15087443553
E-mail:[email protected]
地址:曲靖市麒麟區閩南建材城三區2-10棟4樓

Web前端調試工具——神奇的Console

作者/整理:admin 來源:互聯網 2018-07-21

前言

 

    先上圖:不知道有多少人發現,在瀏覽器開發工具的“Console”上的百度首頁的關于百度招聘的信息:

 

 

 

 

 

 

   今天要給大家介紹的就是是Web前端調試工具中的Console面板,應該說只要是個瀏覽器就會有的開發者工具,按F12出現的即是,就是我們上面圖片上顯示的Console,我這以谷歌瀏覽器為例進行下基本的講解。

 

 

Console探險

 

    今天我們重點要學的是開發者工具中的"Console",在介紹Console之前,我們先將其它的幾個面板介紹下:

 

    Element:主要是用來調試網頁中的html標簽代碼和css樣式代碼

    Network:查看網頁的http通信情況,包括MethodTypeTimeline(網絡請求的時間響應情況)等

    Source:查看JS文件、調試JS代碼

    Timeline:查看js的執行時間,頁面元素渲染時間等

    Profiles:用來查看網頁的性能,比如CPU和內存消耗

    Resources:用來查看加載的各種資源文件,比如jscss、圖片等

    Audits:可以分析當前網頁,可以快速的分析出哪些資源被使用、哪些資源沒有使用,然后提出建議

    Console:可以查看錯誤信息、打印調試信息、調試js代碼,還可以當作Javascript API查看

 

 

代碼調試

 

    我們可以用console來調試js代碼:有圖有真相:

 

 

    我的代碼執行到161行,如果想打印下"result",我就可以在Console中進行調試,輸入代碼:"alert("result="+result);"回車即可,即可彈出result的結果;

 

 

 

 

 

 

    或者是輸入代碼"console.log("result="+result);"直接打印結果也可,如下圖:

 

 

 

    上面說了console的打印和調試功能,下面就來看下它的api功能:

 

api功能

 

    控制臺的核心對象是Console,如果我想查看console都有哪些方法和屬性,我可以直接在Console中輸入“console”并執行;或者用"console.dir(console)",同樣可以實現查看console對象的方法和屬性;

 

 

 

 

    我們再來查看一個常用函數日期函數的方法,我們利用“console.dir()”來查了日期函數的方法:

 

···

 

小結

 

    瀏覽器的console是個特別強大的面板,雖然現在我也只是發現了它的冰山一角,但就這冰山一角就已經深深將我折服了!這里也只是給大家推開一扇窗戶,至于窗戶以外的美景就需要大家自己去探索了。

jdb财神捕鱼网址 极速赛车如何选码 三昇体育 客服端 极速时时是什么票 赛车赛事app 秒速时时彩人为控制 新强时时三星走势图 急速赛车计划全天在线 排列三出888的前兆 黑龙江体彩11选5 浙江61走势图带坐标 重庆老时时开奖结果表 体彩安徽11选5开奖查询 江西时时开了去年号 江苏快3今天走势图跨度 重庆时时彩我觉得很假 破解pk10拾一漏洞