天天看點

Chrome使用技巧(幾個月的心得)

 轉用Chrome,不僅僅因為它的插件之豐富,更因為它的響應速度其他浏覽器都望塵莫及。接着我就要寫寫一些心得。

如何最簡易地用上谷歌搜尋?

1,下載下傳hosts檔案:https://pan.baidu.com/s/1c2r8jV6 解壓密碼:laod.org( 感謝老D大神的貢獻的hosts!!)

2,然後把hosts(沒有字尾的檔案)分别調換掉原本系統裡的hosts檔案,即可正常使用谷歌搜尋。

  • Windows 系統hosts位于 C:\Windows\System32\drivers\etc\hosts
  • Android(安卓)系統hosts位于 /system/etc/hosts
  • Mac(蘋果電腦)系統hosts跟Linux一樣位于 /etc/hosts
  • iPhone(iOS)系統hosts跟Linux Mac一樣位于 /etc/hosts
  • Linux系統hosts位于 /etc/hosts

 android可以利用root explorer 這個app完成替換。

3.接着你就能像我一樣愉快地不用一分錢就能通路Facebook,gmail,谷歌學術等等網站了,同時也能通路chrome商店了。

Chrome使用技巧(幾個月的心得)

注意輸入https而不是http,www.google.com後要加個.hk

chrome實用插件:

用了幾個月的推薦:

Infinity(必備):善心悅目的背景,而且可以自定圖示。(滑鼠滾輪可以翻頁)

AdBlock(必備):到現在幫我屏蔽了上萬條廣告

視訊廣告終結者:在不辦任何會員的情況下,基本上所有視訊都沒廣告了,你知道這酸爽嗎?

LassPass:這個也是利器,不過要花一點點時間學會用,會用的好處就是所有的密碼都不要記了,比如部落格園這麼麻煩的密碼(嘿嘿)

Google翻譯:一鍵翻譯(對于英語不是特别好的我用的也是酸爽)

另外對于前端專用有些插件推薦:

Page Ruler:利器(度量網頁任何部分的尺寸)

CSSViewer:還行(水準高的不需要這插件了)

Window Resizer:不會Chrome控制台調試的就需要這個插件了

Eye Dropper:同上

Chrome調試工具介紹:

Chrome使用技巧(幾個月的心得)

接下來我們先簡要介紹一下Chrome調試工具各個工具的作用。

Element

Elements闆塊你可以看到整個頁面的Dom結構。你可以在這裡編輯HTML,檢視元素CSS,查找元素等等。

Console

Console應該都很熟悉了吧?經常會以為少寫了’}’而報文法錯誤。當然它的功能遠不止這些。點選這裡檢視更多

Sources

Sources就是所有資源了,你可以看到頁面加載的資源,圖檔,css,js等,它們會按照資源的來源分類。

Network

 這個闆塊,你可以檢視頁面所加載的所有資源響應情況,響應時間,浏覽器等待時間,狀态碼,MINE Type,資源大小等。

Timeline

跟前面的工具相比,Timeline就進階很多了。它可以讓你檢視浏覽器的渲染流程。解析代碼,布局,繪制,合并渲染層。

Profiles

Profiles工具主要是用來檢測CPU占用程度,堆棧申請的記憶體。

Resources

Resources工具顯示資源的,跟Sources不同的是,它會對文檔類型分類。并且它可以檢視,增加,删除,修改頁面LocalStorage,SessionStorage,Cookies等等。

以下内容借鑒了該文

快速切換檔案

按Ctrl+P(cmd+p on mac),就能快速搜尋和打開你項目的檔案。

Chrome使用技巧(幾個月的心得)

在源代碼中搜尋

大家都知道如果在要在Elements檢視源碼,隻要定位到Elements面闆,然後按ctrl+f就可以了

Chrome使用技巧(幾個月的心得)

在源代碼中快速跳轉到指定的行

在Sources标簽中打開一個檔案之後,按Ctrl + G,(or Cmd + L for Mac),然後輸入行号,chrome控制台就會跳轉到你輸入的行号所在的行。

或者ctrl+p後輸入  :行号;

Chrome使用技巧(幾個月的心得)

使用多個插入符進行選擇

當編輯一個檔案的時候,你可以按住Ctrl在你要編輯的地方點選滑鼠,可以設定多個插入符,這樣可以一次在多個地方編輯

Chrome使用技巧(幾個月的心得)

裝置模式

Chrome使用技巧(幾個月的心得)

格式化淩亂的js源碼

有時候看到壓縮好的一團糟的js,都不知道從何着手去看。chrome控制台有内建的美化代碼功能,可以傳回一段最小化且格式易讀的代碼。Pretty Print的按鈕在Sources标簽的左下角。

Chrome使用技巧(幾個月的心得)

顔色選擇器

當在樣式編輯中選擇了一個顔色屬性時,你可以點選顔色預覽,就會彈出一個顔色選擇器。當選擇器開啟時,如果你停留在頁面,滑鼠指針會變成一個放大鏡,讓你去選擇像素精度的顔色。

Chrome使用技巧(幾個月的心得)

改變顔色格式

相信前端開發人員都知道,顔色有很多種表示方式,比如rgb,hsl,十六進制表示方法等。看了下面的這個圖,我相信你肯定會佩服chrome的功能強大,連細節都做得那麼好。

在顔色預覽功能使用快捷鍵Shift + Click,可以在rgba、hsl和hexadecimal來回切換顔色的格式

Chrome使用技巧(幾個月的心得)

強制改變元素狀态(友善檢視不同狀态下元素的樣式)

chrome控制台有一個可以模拟CSS狀态的功能,例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能檢視不同狀态下元素的樣式,我相信這個功能對于模仿别人界面的前端愛好者來說是非常實用的。

Chrome使用技巧(幾個月的心得)

利用chrome來檢視和編輯本地檔案

事實上我們可以用chrome來檢視本地檔案,隻要把相關目錄拖到chrome浏覽器中即可。

選擇下一個比對項

當在Sources标簽下編輯檔案時,按下Ctrl + D (Cmd + D) ,目前選中的單詞的下一個比對也會被選中,有利于你同時對它們進行編輯。

Chrome使用技巧(幾個月的心得)

可視化的DOM陰影

Chrome使用技巧(幾個月的心得)

奇淫技

.隐藏的重新整理按鈕,在開發者工具打開的情況下,長按左上角的重新整理按鈕,會出現多種加載選項。

Chrome使用技巧(幾個月的心得)

Add Folder to Workspace,在Source面闆下,右鍵選擇Add Folder

Chrome使用技巧(幾個月的心得)

Source下的Snippets,可以讓你想儲存小段的腳本、書簽或是你在浏覽器中調試時經常用到的代碼,都可以使用Snippets,你可以在Source面闆裡建立、存儲和運作這些Snippets。

Chrome使用技巧(幾個月的心得)

儲存,回退

可以儲存修改,Source面闆下的檔案是可以修改并且支援版本回退的。打開一個檔案,進行編輯,儲存。右鍵打開Local Modifications,你可以看到儲存記錄,你可以選擇回退,到某個時間點。你也可以另存為~

Chrome使用技巧(幾個月的心得)

Chrome Dev開發者選項

Chrome Dev開發者選項,浏覽器進入chrome://flags,你會看到很多浏覽器很多隐藏功能,啟用開發者工具實驗。

Chrome使用技巧(幾個月的心得)

然後再進入設定,你會看到新增加了很多開發者選項。

Chrome使用技巧(幾個月的心得)

打開Layer面闆,可以讓你看到頁面中的複合層。(查找頁面原因的時候非常有用)

Chrome使用技巧(幾個月的心得)

總結

以上内容很多朋友應該不知道,是以在此拿出來分享。Chorme确實強大,用好它不止能省下那麼一點時間呢!

Chrome使用技巧(幾個月的心得)