建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
新羅網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司自2013年起到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
谷歌瀏覽器如今是Web開(kāi)發(fā)者們所使用的最流行的網(wǎng)頁(yè)瀏覽器。伴隨每六個(gè)星期一次的發(fā)布周期和不斷擴(kuò)大的強(qiáng)大的開(kāi)發(fā)功能，Chrome變成了一個(gè)必須掌握的工具。大多數(shù)前端開(kāi)發(fā)者可能熟悉關(guān)于chorme的許多特點(diǎn)，例如使用console和debugger在線(xiàn)編輯CSS。在這篇文章中，我們將分享15個(gè)很酷的技巧，讓你能夠更好的改進(jìn)工作流程?？赐赀@些技巧你會(huì)驚奇而又興奮的發(fā)現(xiàn)是不是很像Sublime Text。
1.快速文件轉(zhuǎn)換
如果Sublime Text沒(méi)有“Go to anything”這個(gè)功能你不可能活下去。所以你會(huì)很高興聽(tīng)到DevTools 也有這個(gè)功能。當(dāng)DevTools打開(kāi)的時(shí)候，你可以按下Ctrl + P( 在Mac上使用Cmd + P)來(lái)快速的尋找和打開(kāi)你工程中的任意文件。
2.在源代碼中搜索
但是如果你希望在源代碼中搜索該怎么辦？按下Ctrl + Shift + F(在Mac上使用Cmd + Opt + F)，即可在所有已加載的文件中查找一個(gè)特定的字符串。這個(gè)搜索的方法也支持正則表達(dá)式。
3.跳到特定行
當(dāng)你打開(kāi)一個(gè)在源標(biāo)簽里的文件之后，DevTools能夠允許你輕松地跳轉(zhuǎn)到代碼里的任意一行，Windows 和 Linux用戶(hù)只需要按下Ctrl + G (在Mac上使用 Cmd + L ),然后輸入你想跳轉(zhuǎn)的行數(shù)即可。
另一個(gè)跳轉(zhuǎn)的方法是按下Ctrl + O ，輸入:和行數(shù)，而不用去尋找一個(gè)文件。
4.在控制臺(tái)中選擇元素
DevTools控制臺(tái)支持一些變量和函數(shù)來(lái)選擇DOM元素：
- $() : document.querySelector()的縮寫(xiě)，返回第一個(gè)與之匹配的CSS選擇器的元素(例如：$('div') 它將返回本頁(yè)的第一個(gè)div元素)。
- $$() : document.querySelectorAll()的縮寫(xiě)，返回一個(gè)數(shù)組，里面是與之匹配的CSS選擇器的元素。
- $0–$4 : 依次返回五個(gè)最近你在元素面板選擇過(guò)的DOM元素的歷史記錄，$0是最新的記錄，以此類(lèi)推。
了解更多關(guān)于Console的命令請(qǐng)閱讀Command Line API
5.使用多個(gè)光標(biāo)和選擇
另一個(gè)打敗Sublime Text的特色出現(xiàn)了。當(dāng)你在編輯一個(gè)文件的時(shí)候你可以通過(guò)按住Ctrl (在Mac上為 Cmd) 同時(shí)點(diǎn)擊你想讓光標(biāo)停留的位置，設(shè)置多個(gè)光標(biāo)，這樣你就可以同時(shí)在多個(gè)位置輸入同一文本了。
6.保存日志
勾選在Console標(biāo)簽下的保存日志選項(xiàng)，你可以使DevTools的console繼續(xù)保存日志而不會(huì)在每個(gè)頁(yè)面加載之后清除日志。當(dāng)你想要研究在頁(yè)面還沒(méi)加載完之前出現(xiàn)的bug時(shí)，這會(huì)是一個(gè)很方便的方法。
7.格式化打印{}
Chrome的開(kāi)發(fā)者工具有一段嵌入的美化代碼，它可以幫你返回一段最小化的且格式易讀的代碼。這個(gè)漂亮的印刷按鈕在你正確打開(kāi)文件之后的Sources標(biāo)簽下的左下角。
8.設(shè)備模式
DevTools包括了一個(gè)強(qiáng)大的模式可用來(lái)開(kāi)發(fā)友好的移動(dòng)端界面。
9.設(shè)備仿真?zhèn)鞲衅?/strong>
設(shè)備模式的另一個(gè)很酷的功能是模擬移動(dòng)設(shè)備的傳感器，例如觸摸屏幕和加速計(jì)。你甚至可以惡搞你的地理位置。這個(gè)功能位于調(diào)試窗口的底部，點(diǎn)擊調(diào)試窗口右上角的show drawer，就可看見(jiàn)Emulation -> Sensors。
10.顏色選擇器
當(dāng)我們?cè)跇邮骄庉嬈髦羞x擇一種顏色時(shí)，你可以點(diǎn)擊顏色預(yù)覽，顏色選擇器就會(huì)彈出。當(dāng)顏色選擇器開(kāi)啟時(shí)，如果你停留在某一頁(yè)面，你的鼠標(biāo)指針就會(huì)轉(zhuǎn)換成一個(gè)放大鏡，選擇像素精度的顏色。
11.強(qiáng)制元素狀態(tài)
DevTools有一個(gè)功能是模擬CSS的狀態(tài)，如在元素中的hover和focus，這能夠能容易的設(shè)計(jì)他們的樣式。該功能來(lái)自css編輯器。
12.查看Shadow DOM
由于其他基礎(chǔ)的元素在視圖中正常的隱藏，網(wǎng)頁(yè)瀏覽器構(gòu)建例如文本框，按鈕和輸入之類(lèi)的東西。不過(guò)，你可以在Settings -> General 中切換成Show user agent shadow DOM，這樣就會(huì)在元素標(biāo)簽頁(yè)中顯示被隱藏的代碼。給了你很大的控制，讓你甚至可以單獨(dú)地設(shè)計(jì)他們。
13.選擇下一個(gè)匹配項(xiàng)
當(dāng)你在Sources 標(biāo)簽下編輯文件時(shí)，如果你按下Ctrl + D (Cmd + D)，下一個(gè)匹配項(xiàng)也會(huì)被選中，這能夠幫助你同時(shí)編輯他們。
14.改變顏色格式
在顏色預(yù)覽中使用Shift + Click ，可以在rgba, hsl 和 hexadecimal 這三種格式中改變。
15.通過(guò)工作區(qū)來(lái)編輯本地文件
Workspaces是Chrome DevTools的一個(gè)強(qiáng)大的的功能，這個(gè)功能使得Chrome成為一個(gè)真正的IDE。Workspaces使Sources標(biāo)簽下的文件和你本地的工程文件相匹配。所以現(xiàn)在你可以直接編輯和保存，而不用復(fù)制粘貼到外部的文本編輯器里。
配置Workspaces，你只需要去Sources標(biāo)簽下，在左邊的控制面板的任何地方點(diǎn)擊右鍵，
并且選擇Add Folder To Worskpace, 或者只是把你的整個(gè)工程文件夾拖放到DevTools。
現(xiàn)在，無(wú)論你打開(kāi)哪一頁(yè)，被選擇的文件夾的子目錄和它包含的所有文件都將能被編輯。為了使它更加的有用，你可以將頁(yè)面中用到的文件映射到相應(yīng)的文件夾，允許在線(xiàn)編輯和簡(jiǎn)單的保存。
新聞標(biāo)題：前端老司機(jī)都在用的Chrome開(kāi)發(fā)者工具15個(gè)小技巧
本文來(lái)源：http://www.dlmjj.cn/article/cojipep.html
