谷歌瀏覽器程式設計師開發工具,究極使用技巧
搜尋檔案
按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安全開發,活躍在大資料開源社群,同時推薦多種高效便捷的開發工具,分享自己的各種經驗技巧總結。...
網路請求工具,post,get等谷歌瀏覽器測試外掛,很好用
某些使用者在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 請求