建站
咨詢
售后
建站咨詢
新聞中心
作為一名前端開發(fā)者，Chrome內(nèi)置的控制臺是必須了解的，它擁有非常豐富的特性功能，對我們的開發(fā)幫助灰常大！
成都創(chuàng)新互聯(lián)服務(wù)項目包括石峰網(wǎng)站建設(shè)、石峰網(wǎng)站制作、石峰網(wǎng)頁制作以及石峰網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，石峰網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到石峰省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
1、元素選擇器($)
如果你接觸過JQuery，那么對$()肯定不陌生，這是元素選擇器，用來選擇HTML元素，但現(xiàn)在，我們要了解的是控制臺中的$()。
打開百度，按F12打開控制臺
$() 相當(dāng)于JavaScript中的 document.querySelectorAll()，返回一個數(shù)組（后者返回的是類數(shù)組對象）。
注：本身 $() 應(yīng)該是 document.querySelector()，但今天測試卻是返回一組值，待考究。
就像上圖所示，可以 $()[index] 返回某一個元素。
其實還有不少快捷鍵：
$ // 相當(dāng)于 document.querySelector 。 $$ // 相當(dāng)于 document.querySelectorAll 。 $_ // 返回上一個表達(dá)式的值 $0-$4 // 返回最近5個Elements面板選中的DOM元素。 dir // console.dir keys // 取對象的鍵名, 返回鍵名組成的數(shù)組 values // 去對象的值, 返回值組成的數(shù)組
方向鍵盤的上下鍵
copy(content) // 將content（也可以說是content）復(fù)制到剪貼板
2、console
console相信大家用的最多，這里就不多介紹了，可以看這篇文章：《JavaScript在瀏覽器上的調(diào)試技巧》
3. 讓Chrome變成編輯器
在Chrome中，我們只需一行命令即可讓其變成編輯器：
document.body.contentEditable=true
4. clear()
如果你想清空控制臺和內(nèi)存，只需這樣：
clear()
接著點回車鍵即可。
下面再介紹一些有趣實用的功能：
1、截圖
其實chrome提供了一個截圖功能，但貌似只能在移動模式。
2. 代碼格式化
有些時候，我們在控制臺的Sources中查看CSS或JavaScript文件時，會看到一堆壓縮的代碼，但只需點擊一下這里：
3. 打開命令菜單
按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）打開命令菜單。
4、隱藏部分console日志
如果日志太多，我們可以隱藏掉部分 Console 日志（在輸出日志的腳本上單擊右鍵，filter -> hide）
這里還發(fā)現(xiàn)了一個不錯的關(guān)于Chrome開發(fā)工具的文檔：Chrome開發(fā)工具文檔
分享標(biāo)題：多了解一下Chrome開發(fā)者控制臺
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/cdepijh.html
