chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

前端工程師大部分工作成果需要在瀏覽器中查看,使用 chrome 瀏覽器的頻率非常高。更好更有效率地使用 chrome,將 chrome 配置成趁手的瀏覽器,將極大提升編程效率。現將chrome瀏覽器的一些技能分享給大家

技巧篇

控制檯

在 chrome 開發者工具中的任何一個面板下(除 console 面板外),按住 esc 都可以在該面板下方新生成一個 console 面板

通常情況下,控制檯只提供單行輸入,可以用分號做分割符來執行多個 javascript 語句;而如果需要多行代碼的話,可以通過組合鍵 shift+enter 來實現換行,在這種情況下代碼不會被立即執行。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

代碼片段

chrome 在 sources 頁面提供 snippets 一欄,這裡我們可以隨時編寫 Javascript 代碼,運行結果會打印到控制檯。代碼是全局保存的,在任何頁面,包括新建標籤頁,都可以查看或運行這些代碼。使用 command + enter 可以運行該代碼


chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

跳轉位置

  在 elements 標籤下,選擇元素節點,點擊右鍵菜單中的 scroll into view,可以滾動瀏覽器到元素所處位置。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

展開 DOM

在 Elements 標籤頁中,如果要查看一個元素中曾經很深的子元素,可以按住 option 鍵,點擊元素,則元素的 DOM 結構會完全展開

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

工具篇

Infinity新標籤頁

  Infinity是一款標籤頁美化的插件,使用它不在使你的瀏覽器那麼的單調,還可以添加書籤在標籤頁下面,方便打開,是一個很不錯的值得推薦的插件。用了不用在自己的書籤收藏夾慢慢的找書籤了,可以打開瀏覽器的第一時間打開自己需要的網站。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

Responsive Web Design Tester

The Responsive Web Design Tester 是一個非常棒的瀏覽器擴展,使你可以快速的查看你的網站在不同設備和不同瀏覽器下的狀態。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

Window Resizer

Window Resizer 擴展允許您調整瀏覽器窗口。單擊菜單欄中的圖標會產生一個可以自定義窗口大小的下拉菜單。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

olorPick Eyedropper

ColorPick Eyedropper 是一個簡單的顏色選擇器工具,允許你從任何web頁面選擇顏色值。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

CSSViewer

CSSViewer是一個簡單的CSS屬性查看器。它提供了一個浮動面板,該面板顯示鼠標懸浮在的元素的標識,以及它的字體、文本、顏色、背景、框、定位和效果屬性。CSSViewer提供你所需要的基本的CSS信息。

chrome用不好,BUG改到老,這些chrome 瀏覽器使用技巧你需要掌握

最後:最重要的問題,如何最簡易地用上谷歌搜索

1.下載hosts文件(需要的私聊回覆:下載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


分享到:


相關文章: