摘要:說明這篇文章主要介紹的就是一些瀏覽器的小技巧,很簡單,希望對大家有所幫助。顏色的,或十六進制表示。單擊其中一個方塊將顏色更改為該方塊。在當前顏色的,和表示之間切換。
說明
這篇文章主要介紹的就是一些chrome瀏覽器的小技巧,很簡單,希望對大家有所幫助。
這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如果發(fā)現(xiàn)有些技巧不起作用,請先查看瀏覽器的版本。
快捷鍵比較多,這里挑出幾個常用的說一下
最后會給出一張比較完整的快捷鍵的表
下列快捷鍵可以在所有 開發(fā)者工具 面板中使用
全局快捷鍵 | window | Mac |
---|---|---|
打開 開發(fā)者工具 | F12、Ctrl+Shift+I | Cmd+Opt+I |
打開 開發(fā)者工具 并聚焦到控制臺 | Ctrl+Shift+J | Cmd+Shift+C |
刷新頁面 | F5、Ctrl+R | Cmd+R |
刷新忽略緩存內(nèi)容的頁面 | Ctrl+F5、Ctrl+Shift+R | Cmd+Shift+R |
在Elements 面板中使用的快捷鍵
Elements 面板 | window | Mac |
---|---|---|
編輯屬性 | Enter、雙擊屬性 | Enter、雙擊屬性 |
隱藏元素 | H | H |
切換為以HTML形式編輯 | F2 |
在Styles 邊欄中使用的快捷鍵
Styles 邊欄 | window | Mac |
---|---|---|
轉(zhuǎn)到源中屬性值聲明行 | Ctrl+點擊屬性值 | CMd+點擊屬性值 |
在顏色定義值之間循環(huán) | Shift+點擊顏色選取器框 | Shift+點擊顏色選取器框 |
編輯下一個/上一個屬性 | Tab、Tab+Shift | Tab、Tab+Shift |
在控制臺中使用的快捷鍵
控制臺 | window | Mac |
---|---|---|
聚焦到控制臺 | Ctrl+` | Ctrl+` |
清除控制臺 | Ctrl+L | Cmd+K、Opt+L |
多行輸入 | Shift+Enter | Ctrl+Return |
選取頁面中的一部分,保存為圖片
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選擇左上角的元素選擇按鈕,圖標顏色變?yōu)樗{色即表示選中了
3、Windows 下按住 Ctrl,Mac 就按住 Command,然后點擊鼠標左鍵在頁面選擇區(qū)域即可,松開鼠標后,截圖自動下載。
4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
節(jié)點截圖選中頁面中某一元素,保存為圖片
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中任意元素節(jié)點
3、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
4、點擊Capture node screenshot,或者輸入這行中任意的關(guān)鍵字,比如輸入node,也會出來這個選項,然后點擊這個選項,圖片會自動下載。
5、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
截全屏保存完整網(wǎng)頁為圖片
第一種方式
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、打開命令工具
使用快捷鍵 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)
3、點擊Capture full size screenshot,或者輸入這行中任意的關(guān)鍵字,比如輸入full,也會出來這個選項
4、圖片自動下載好后,點擊圖片后面的箭頭,可以在文件夾中顯示
第二種方式
1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、選中 切換開發(fā)模式按鈕,圖標顏色變?yōu)樗{色即表示選中了
3、點右上方的三個 小點,點擊Capture full size screenshot,圖片會自動下載
拾色器在Styles邊欄 點擊任意顏色的小色塊,就可以彈出顏色選擇器
1、顏色選擇區(qū)域。
2、吸管。
3、復(fù)制到剪貼板。將顯示值復(fù)制到剪貼板。
4、顯示值。顏色的RGBA,HSLA或十六進制表示。
5、調(diào)色板。單擊其中一個方塊將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當前顏色的RGBA,HSLA和Hex表示之間切換。
9、調(diào)色板切換器。
1、在Styles 邊欄,鼠標放在每一小塊樣式規(guī)則上,右下方都會有三個小點
2、鼠標放在這三個小點上,會出現(xiàn)5個小圖標,每個小圖標都有作用
3、他們從左到右分別代表
添加 text-shadow
添加 box-shadow
添加 color
添加 background-color
插入樣式規(guī)則
增加移動設(shè)備1、打開開發(fā)者工具
使用 快捷鍵 F12 (Windows) 或 Cmd+Opt+I (Mac)
2、點擊右上方的三個小點,然后選擇Settings
3、選擇Devices,然后在需要添加的設(shè)備前面打上勾就可以了
總結(jié)這些小技巧,很簡單,希望對大家有所幫助,不過對于有辦法,有時間的朋友還是建議去官網(wǎng)看看吧,畢竟那里才更加全面。
Chrome 開發(fā)者工具
點擊查看原圖
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/89984.html
摘要:說明這篇文章主要介紹的就是一些瀏覽器的小技巧,很簡單,希望對大家有所幫助。顏色的,或十六進制表示。單擊其中一個方塊將顏色更改為該方塊。在當前顏色的,和表示之間切換。 說明 這篇文章主要介紹的就是一些chrome瀏覽器的小技巧,很簡單,希望對大家有所幫助。 這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如果發(fā)現(xiàn)有些技巧不起作用,請先查看瀏...
摘要:說明這篇文章主要介紹的就是一些瀏覽器的小技巧,很簡單,希望對大家有所幫助。顏色的,或十六進制表示。單擊其中一個方塊將顏色更改為該方塊。在當前顏色的,和表示之間切換。 說明 這篇文章主要介紹的就是一些chrome瀏覽器的小技巧,很簡單,希望對大家有所幫助。 這其中的一些小技巧在低版本中是沒有的,所以建議大家用最新版的,目前最新版是62,版本很重要,如果發(fā)現(xiàn)有些技巧不起作用,請先查看瀏...
摘要:歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
摘要:歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
閱讀 1794·2021-11-18 10:02
閱讀 3524·2021-11-16 11:45
閱讀 1786·2021-09-10 10:51
閱讀 2106·2019-08-30 15:43
閱讀 1372·2019-08-30 11:23
閱讀 1484·2019-08-29 11:07
閱讀 1892·2019-08-23 17:05
閱讀 1394·2019-08-23 16:14