1. 程式人生 > >谷歌瀏覽器程式設計師開發工具,究極使用技巧

谷歌瀏覽器程式設計師開發工具,究極使用技巧

搜尋檔案

按Ctrl+P,有時候專案js特別多的時候想除錯某個js檔案就太方便了。

原始碼搜尋

在Elements介面按Ctrl+F,就是我們經常用的查詢快捷鍵,就可以查找了。

去檔案指定行

開啟一個js檔案後,按Ctrl + G,輸入行號,就可以跳到指定行,這比你手動拉滾動條可塊多了。

批量輸入

你可以選擇一個檔案的多個地方,進行同時輸入,在批量編輯的時候很給力的。

對齊js程式碼

有時候想研究一下人家的js程式碼,無奈都是壓縮過的,怎麼看呢?如下圖,點選瞬間變整齊。

選擇特定顏色

如圖操作即可,當看到一些顏色很好看的時候就可捕捉下來自己使用了。

改變顏色格式

我們都知道顏色有很多種表示方式,比如rgb,hsl,十六進位制表示方法等。有事需要的顏色格式沒有還要轉一下多麻煩,急死歐文了。看看人家谷歌怎麼貼心的。

在顏色預覽功能使用快捷鍵Shift + Click,可以變換顏色格式

檢視不同狀態下元素的樣式

可以強行設定元素的狀態。

有時候想檢視一下hover和focus 的樣式不得不把滑鼠放上去,然後滑鼠一動就跑了 有木有,這下就不用擔心了。

當然你也可以在元素面板選中元素,右鍵點選進行設定。

選擇相同項

按下Ctrl + D ,一直按,會選擇相同的項,適合作批量替換用。

清空快取

要知道對於開發者來說,快取可是一大噩夢,有時候除錯好的程式明明寫對了,半天沒有效果,還以為是bug呢,結果同事提醒你 清下快取試一試,我一試瞬間好了有沒有,害的老子調了一下午。

開啟設定面板

找到這一項勾上

設定之後,當你開啟F12再重新整理的時候就永遠不會有快取了,也不用你每次修改之後都要點選清除快取按鈕了。

相關推薦

瀏覽器程式設計師開發工具使用技巧

搜尋檔案 按Ctrl+P,有時候專案js特別多的時候想除錯某個js檔案就太方便了。 原始碼搜尋 在Elements介面按Ctrl+F,就是我們經常用的查詢快捷鍵,就可以查找了。 去檔案指定行 開啟一個js檔案後,按Ctrl + G,輸入行號,就可以跳到指定

開發瀏覽器插件會上癮搞了一個JSONViewer一個頁面格式化多條JSON提升工作效率

screen logs 效果圖 onerror 搜索 tps 開始 xorg arr 最近寫了一個谷歌瀏覽器插件(Chrome extension),拿出來分享下,希望能提升大家的工作效率。 一、背景 先說痛點:日常開發中,經常需要不停的把接口輸出的JSON拷貝到在線J

瀏覽器input獲得焦點時背景變黃如何取消。

谷歌 ×××背景邊框 開發時,遇到了一個谷歌瀏覽器自帶樣式, input標簽獲得焦點時,背景自動變黃。網上查了點資料都沒解決方案,現特此奉上解決方案。其實那個×××不是背景,是css3的新的樣式,陰影。css裏面加入如下樣式即可解決 input{ -webkit-box-shadow:non

font-size設定為12px以下載瀏覽器上無法正常顯示如何解決?

因為 Chrome瀏覽器做了如下限制: 1. font-size 有一個最小值 12px,低於 12px 的,一律按 12px 顯示。 2. 但是允許你把 font-size 設定為 0. 3. 這個 12px 的限制使用者是可以自行調整的,進入 chrome://

程式設計師實用工具推薦一款程式碼統計神器GitStats

閱讀全文需7分鐘,工具很實用。 1. 前言 對於Git專案開發,有一些視覺化的工具,如gitk,giggle等,來檢視專案的開發歷史。但對於大型的專案,這些簡單的視覺化工具遠遠不足以瞭解專案完整的開發歷史,一些定量的統計資料(如每日提交量,行數等)更能反映專案的開發程序和活躍性。今天給大家推薦的這款工具:

非同步載入css 和 瀏覽器各實用小工具介紹

非同步載入css資源 加開頁面首屏顯示速度使我們前端一直在追求的目標,而css資源在這些優化中同樣也是不可或缺的。 一個網站可能有一部分css資源是必須的,他需要在頁面渲染完之前就被載入完,並和html一起解析,這個暫時無法做手腳,但是我們可以把一些非關鍵的css進行非同步化,也就是非同步載入。 市面上有很多

瀏覽器擴充套件程式一鍵解決本地開發跨域問題讓你不用亂mock資料

谷歌瀏覽器擴充套件程式一鍵解決本地開發跨域問題,讓你不用亂mock資料 1.在谷歌瀏覽器中開啟它的網上應用商店 (需要翻牆);如果你無法翻牆可以下載我的這個工具包 1.1工具包用法:在谷歌瀏覽器上輸入:chrome://extensions/ 進入拓展管理介面然後將剛剛下載的工具包中的1

新手程式設計師必備的5大開發工具看看你都有了嗎?

“工欲善其事,必先利其器!”作為入門級別的程式設計師,幾款趁手的程式設計軟體是最需要的。除了Git、Visual Basic……等等,其實還有很多很很酷的程式設計工具。接下來就給大家看7款不一樣的程式設計工具,如有心動,純屬巧合。      

程式設計師最喜歡的5個開發工具每個人都會喜歡它!

Atom Atom是github專為程式設計師設計的跨平臺文字編輯器,它支援巨集,自動分屏功能,並與檔案管理器整合。 (1)、免費 (2)、git原生支援 (3)、豐富的外掛 (4)、自定義介面 Emacs (1)、瀏覽網頁以觀看視訊併發送和接收電子郵件。 (2)、偵錯程式 (3)、玩遊戲,

【木木與呆呆的專欄】Java程式設計師,專注Java程式設計技術,開發以後臺為主前臺為輔目前投身Hadoop大資料以及Ranger安全開發,活躍在大資料開源社群同時推薦多種高效便捷的開發工具,分享自己的各種經驗技巧總結。

Java程式設計師,專注Java程式設計技術,開發以後臺為主前臺為輔,目前投身Hadoop大資料以及Ranger安全開發,活躍在大資料開源社群,同時推薦多種高效便捷的開發工具,分享自己的各種經驗技巧總結。...

網路請求工具postget等瀏覽器測試外掛很好用

某些使用者在Chrome外掛網下載了Chrome外掛後,不知道怎麼才能把它安裝到Chrome瀏覽器中,使用者可以根據本站提供的教程: 但是,由於一些特殊原因,極個別Chrome外掛在使用上述的安裝方法的時候,Chrome會提示“只能通過Chrome網上應用商店安裝該程式”,如圖所示: 為此Chr

網站開發如何禁用Chrome瀏覽器自動儲存密碼的提示?

在網頁開發中,在表單中加入autocomplete="off"後,IE和FF不會提示儲存密碼,但是用Chrome瀏覽器登入系統時,會彈出自動儲存密碼的提示,從安全的角度考慮,需要禁止瀏覽器的這個功能,提升系統安全性。大部分瀏覽器都是根據表單域的type="password"

瀏覽器開發工具詳解

Technical Writer at Google Discover new ways to analyze how your page loads in this comprehensive reference of Chrome DevTools ne

開發工具 瀏覽器】細數那些優秀的瀏覽器外掛

# 概述 相信所有人包括程式設計師都離不開瀏覽器,而作為猿來說,谷歌瀏覽器是我們必不可少的工具,開發除錯,查詢資料都離不開他,所以說瀏覽器也是一款開發工具也不為過。 ![](https://img-blog.csdnimg.cn/20200322142629494.png) 瀏覽器經過過多年的發展,誕生了無數

被墻怎樣給瀏覽器加入迅雷下載插件

模式 ott 下載 chrome 程序 lan 宋體 能夠 font 首先須要下載這個迅雷下載插件。下載地址是:http://pan.baidu.com/s/1G0F2e 本來在谷歌的擴展程序裏面能夠搜索到這個插件的,但被墻了之後()。訪問不了。也就下載不到了,辛虧在網

chrome瀏覽器-DevTool開發者工具-詳細總結

相關 tail justify 任務管理器 log 兩個 停用 表格 需要 chrome的開發者工具可以說是十分強大了,是web開發者的一大利器,作為我個人而言平時用到的幾率很大,相信大家也很常見,但是不要僅僅停留在點選元素看看樣式的層面上哦,跟著我的總結一起學習實踐一下

ubuntu(linux)下瀏覽器跨域問題XMLhttprequest跨域問題

replace mod class req box tps 圖片 ebs nal ubuntu(linux)下谷歌瀏覽器跨域問題 今天在使用谷歌瀏覽器實時調試代碼的時候遇到這樣的錯誤: XMLHttpRequest cannot load http:/

新版瀏覽器怎麽查找和改變編碼格式 IT開發人員的編碼格式

lock class 編碼 瀏覽器 雲盤 大神 lan target aid 解決方法在最下面,還有可下載的安裝包 今天,無意中在解決一個亂碼問題,後臺是有過判斷解決兼容性問題,但是有個別電腦還是有亂碼問題,就去想改變下前臺的編碼格式,突然發現一向好用的谷歌,居然找不到

selenium3.4.0-java啟動瀏覽器和火狐瀏覽器

java 4.0 col files nag bin style implicit timeout 啟動谷歌瀏覽器 @Before public void setUp() throws Exception { System.setProperty(

使用瀏覽器開發者工具分析 http/https 請求耗時

web1、打開工具2、各部分的含義 參考文章:https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing-explanation使用谷歌瀏覽器開發者工具分析 http/https 請求