成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你不知道的Chrome DevTools（1）：神奇的console

KevinYan / 576人閱讀

摘要：我打算把一些上使用的高級(jí)技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。在代碼中使用的最簡單的用法就是寫個(gè)在控制臺(tái)打印一行消息。跟的區(qū)別在于會(huì)對輸出的對象進(jìn)行展開。用于顯示一組的控制臺(tái)輸出，要搭配來使用。

Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的標(biāo)簽代碼就能看到頁面效果，這年頭誰不會(huì)用Chrome開發(fā)者工具呀。

但是Chrome能做的遠(yuǎn)不止你平常用的那么簡單，這一個(gè)小小的開發(fā)工具集成了很多高級(jí)的功能你未必知道。我打算把一些Chrome DevTools上使用的高級(jí)技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。

console簡介

這一篇主要介紹我們常用的console這個(gè)瀏覽器api。在Javascript代碼中使用console的最簡單的用法就是寫個(gè)console.log()在控制臺(tái)打印一行消息。然而你知道嗎？console除了用log這個(gè)方法來打印消息外，還error、warn、assert、dir、info、trace等高級(jí)方法，每個(gè)方法對應(yīng)不用的用途，在下文將一一敘述。

多彩的console.log

其實(shí)console.log()方法里可以傳入多個(gè)參數(shù)，控制臺(tái)會(huì)根據(jù)參數(shù)的設(shè)置把多個(gè)消息打印到同一行的。比如這樣：

    console.log("test", 123);

這樣在控制臺(tái)就會(huì)這樣顯示：

如果log方法里第一個(gè)參數(shù)是帶有特別標(biāo)識(shí)符的字符串的話，控制臺(tái)會(huì)根據(jù)不同的標(biāo)識(shí)符來把后面的參數(shù)填充到前面的字符串中去。常見的標(biāo)識(shí)符有以下：

%s 表示輸出字符串

%d 表示輸出數(shù)字（也可以用%i）

%f 表示輸出浮點(diǎn)數(shù)值

%o 表示輸出Dom元素

%O 表示輸出JavaScript對象

%c 表示對輸出的文字應(yīng)用特殊的樣式

從下面幾個(gè)截圖可以看得出這些標(biāo)識(shí)符的用法了。

最特別的還是%c的用法，使用了%c你就可以讓控制臺(tái)輸出的內(nèi)容包含你自己定制的樣式。例如這樣：

可以看出%c應(yīng)用的樣式是CSS的語法，所以基本上CSS支持的樣式語句都可以支持。當(dāng)然，Chrome是有過濾一些CSS語法的，比如對元素定位的CSS語法就不支持（ps：貌似定位啥的也沒用，除非是想搗亂的程序員，呵呵）

彩色的輸出語句貌似看起來中看不中用，其實(shí)不然。大型的web開發(fā)項(xiàng)目，特別是多人分模塊開發(fā)的時(shí)候，控制臺(tái)一大堆console.log輸出，你一下子找不到你自己的模塊的輸出語句。如果給你自己的模塊輸入語句應(yīng)用了不同的顏色，相對來說比較好定位到輸出的地方，這是提高效率的一個(gè)小技巧。

console的其他API

其他的函數(shù)例如info,error,warn基本類似，只是在代表的意義和輸出的樣式有所區(qū)別。

除此之外，console還有一些比較少見但實(shí)用的api。

console.trace

console.trace跟log的區(qū)別在于trace會(huì)對輸出的對象進(jìn)行展開。

console.group

console.group用于顯示一組的控制臺(tái)輸出，要搭配console.groupEnd來使用。

console.time

console.time用于顯示代碼執(zhí)行的時(shí)間，要搭配console.timeEnd來使用。

其他

其他的console方法我將簡單列舉一下，就不一一詳細(xì)說明了，詳細(xì)可以參考Google的開發(fā)文檔。

console.assert() 用于判斷表達(dá)式，滿足表達(dá)式時(shí)才輸出語句；

console.debug() 用于輸出輸出debug的信息；

console.dir() 用于展開輸出一個(gè)dom元素的JavaScript對象；

console.profile() 用于記錄代碼消耗CPU的信息；

console.timeStamp() 用于標(biāo)記運(yùn)行時(shí)的timeline信息；

console.count() 用于記錄代碼執(zhí)行的次數(shù)；

console.memory 用于顯示此刻使用的內(nèi)存信息（這是一個(gè)屬性而不是方法）；

console.table() 用表格的形式來輸出信息；

console.clear() 清空控制臺(tái)的內(nèi)容（當(dāng)然你可以用快捷鍵ctrl+L）；

另外，再來優(yōu)惠大派送，介紹幾個(gè)在Chrome控制臺(tái)上比較有趣的命令。

$0 可以在控制臺(tái)輸出在Elements面板選中的頁面元素；

$_ 表示上一次在控制臺(tái)鍵入的命令，你也可以用快捷鍵“上方向鍵”來達(dá)到同樣的效果；

$x 可以用xPath的語法來獲取頁面上的元素；

結(jié)語

Chrome的console語法確實(shí)很強(qiáng)大很方便，多點(diǎn)使用不同的方法可以提高咱們前端的開發(fā)效率。寫在最后的話：本文基本上是在參考了Google的DevTools文檔之后，結(jié)合自己的經(jīng)驗(yàn)來寫的，目的是把文檔中說到的一些特別的方法介紹給大家，如果想多點(diǎn)了解，可以到Google的DevTools文檔看看。致謝！

參考文獻(xiàn)

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78023.html

相關(guān)文章

  • 你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

    摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發(fā)調(diào)試有幫助。這有點(diǎn)類似前面說過的插件。類似的針對不同框架的調(diào)試工具還有最后介紹的不是的插件，而是主題?？偨Y(jié)好的，這次的插件就推薦了這幾個(gè)。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的...

    svtter 評論0 收藏0

  • 你不知道的Chrome DevTools（2）：那些debug的技巧

    摘要：我打算把一些上使用的高級(jí)技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結(jié)前端在調(diào)試代碼的時(shí)候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔...

    warnerwu 評論0 收藏0

  • 五種前端開發(fā)必備的調(diào)試技術(shù)

    摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動(dòng)調(diào)試斷點(diǎn)斷點(diǎn)方法遠(yuǎn)程映射本地調(diào)試在移動(dòng)上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。 在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。 Weinre移動(dòng)調(diào)試 DOM 斷點(diǎn) debugger斷點(diǎn) native方法hook 遠(yuǎn)程映射本地調(diào)試 Weinre 在移動(dòng)上面開...

    張紅新 評論0 收藏0

  • Chrome 控制臺(tái)常用調(diào)試技巧詳解

    1、Chrome控制臺(tái)小技巧 打開和關(guān)閉抽屜式選項(xiàng)卡：按Esc鍵可打開和關(guān)閉 DevTools 的 Drawer（抽屜式選項(xiàng)卡） 在Drawer（抽屜式選項(xiàng)卡）中，你可以在 Console 控制臺(tái)中執(zhí)行命令，查看動(dòng)畫檢查器(Animations)，配置網(wǎng)絡(luò)條件(network conditions)和渲染(rendering)設(shè)置，搜索(search)字符串和文件等 showImg(https...

    JouyPub 評論0 收藏0

  • Chrome 控制臺(tái)常用調(diào)試技巧詳解

    1、Chrome控制臺(tái)小技巧 打開和關(guān)閉抽屜式選項(xiàng)卡：按Esc鍵可打開和關(guān)閉 DevTools 的 Drawer（抽屜式選項(xiàng)卡） 在Drawer（抽屜式選項(xiàng)卡）中，你可以在 Console 控制臺(tái)中執(zhí)行命令，查看動(dòng)畫檢查器(Animations)，配置網(wǎng)絡(luò)條件(network conditions)和渲染(rendering)設(shè)置，搜索(search)字符串和文件等 showImg(https...

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<