日本高清免费一本视频100禁_在线不卡欧美精品一区二区三区_国产一区二区好的精华液_中文综合在线_国产啊啊啊视频在线观看_大地资源网免费观看高清

中國專業(yè)IT外包服務(wù)

用心服務(wù)每一天
IT之道-艾銻知道

您當(dāng)前位置: 主頁 > 資訊動態(tài) > 艾銻分享 >

Chrome DevTools中的這些騷操作,你都知道嗎?-網(wǎng)絡(luò)運維


2020-05-28 20:49 作者:admin

Chrome DevTools中的這些騷操作,你都知道嗎?-網(wǎng)絡(luò)運維

 
網(wǎng)絡(luò)運維 保姆級的IT外包,2小時內(nèi)上門,專業(yè)工程師7*24h隨叫隨到,提供整體的IT解決方案,兼職網(wǎng)管,桌面運維,it外包
 
引言 
作為開發(fā)人員,平時用的最多的就是Chrome devtools了,但是可能很多同學(xué)都像我一樣平時用的最多也就只是Console和Elements面板了。
我整理了一些我平時用的比較多的一些調(diào)試小技巧,相信對提高的你的工作效率能起到不小的幫助!
小程序開發(fā)命令(Command) 菜單 
“命令”菜單是最最常用的,本文也會多次用到,所以這里先說一下打開方式:
按Cmd + Shift + P(如果使用Windows,則按Ctrl + Shift + P)打開“命令”菜單。
小程序開發(fā)截圖DOM元素 
當(dāng)你只想對一個特別的 DOM 節(jié)點進行截圖時,你可能需要使用其他工具弄半天,但現(xiàn)在你直接選中那個節(jié)點,打開 命令(Command) 菜單并且使用 節(jié)點截圖 就可以了。
截取特定節(jié)點對應(yīng)上圖命令是Screenshot Capture node screenshot。
截取特定DOM元素示例:

不只是這樣,你同樣可以用這種方式 實現(xiàn)全屏截圖 :通過 Screenshot Capture full size screenshot 命令。
  ?    請注意,這里說的是全屏,并不只是頁面可視區(qū)域,而是包含滾動條在內(nèi)的所有頁面內(nèi)容。    ?
對應(yīng)截取全屏示例:

在控制臺中使用上次操作的值 
我是最近才發(fā)現(xiàn)這個技巧。使用$_可以引用在控制臺執(zhí)行的前一步操作的返回值。如果您正在控制臺調(diào)試一些JavaScript代碼,并且需要引用先前的返回值,那么這可能非常方便。
重新發(fā)起xhr請求
在平時和后端聯(lián)調(diào)時,我們用的最多的可能就是Network面板了。但是每次想重新查看一個請求,我們往往都是通過刷新頁面、點擊按鈕等方式去觸發(fā)xhr請求,這種方式有時顯得會比較麻煩,我們可以通過google提供的Replay XHR的方式去發(fā)起一條新的請求,這樣對于我們開發(fā)效率的提升是有所幫助的。
編輯頁面上的任何文本 
在控制臺輸入document.body.contentEditable="true"或者document.designMode = 'on'就可以實現(xiàn)對網(wǎng)頁的編輯了。
其實這個還是比較實用的,比如你要測試一個DOM節(jié)點文字太長時,樣式是否會混亂,或者要去直接修改頁面元素去滿足一些業(yè)務(wù)需求時。(我之前是在Elements面板一個一個去修改的,,,)
網(wǎng)絡(luò)面板(Network)的幻燈片模式 
啟動Network 面板下的Capture screenshots就可以在頁面加載時捕捉屏幕截圖。有點幻燈片的感覺。單擊每一幀截圖,顯示的就是對應(yīng)時刻發(fā)生的網(wǎng)絡(luò)請求。這種可視化的展現(xiàn)形式會讓你更加清楚每一時刻發(fā)生的網(wǎng)絡(luò)請求情況。

動畫檢查 
DevTools 中有一個動畫面板,默認情況下它是關(guān)閉的,很多人可能不太清楚這個功能。它可以讓你控制和操縱 CSS 動畫,并且可視化這些動畫是如何工作的。
要打開該面板,可以在 DevTools 右上角菜單 → More tools 中打開 Animations :

默認情況下,DevTools 會“監(jiān)聽”動畫。一旦觸發(fā),它們將被添加到列表中。你能看到這些動畫塊如何顯示。在動畫本身上,DevTools 會向我們展示哪些屬性正在更改,例如 background-color 或 transform。
然后,我們可以通過使用鼠標(biāo)拖動或調(diào)整時間軸來修改該動畫。
遞增/遞減 CSS 屬性值 
作為前端開發(fā),平時少不了通過Elements面板去查找元素以及它的css樣式。有時調(diào)整像素px會比較麻煩一點,這時就可以使用快捷鍵去幫你完成:
1. * 增量0.1  
2.   * Mac:Option +向上和Option +向下  
3.   * Windows:Alt +向上和Alt +向下  
4. * 增量1  
5.   * Mac:向上+向下  
6.   * Windows:向上+向下  
7. * 增量10  
8.   * Mac:?+向上和?+向下  
9.   * Windows:?+向上和?+向下  
10. * 遞增100  
11.   * Mac:?+向上和?+向下  
12.   * Windows:Ctrl +向上和Ctrl +向下 
在低端設(shè)備和弱網(wǎng)情況下進行測試 
我們平時開發(fā)一般都是在辦公室(wifi 網(wǎng)速加快),而且設(shè)備一般都是市面上較新的。但是產(chǎn)品的研發(fā)和推廣,一定要考慮低設(shè)備人群和弱網(wǎng)的情況。
在Chrome DevTools中可以輕松調(diào)節(jié)CPU功能和網(wǎng)絡(luò)速度。這樣,我們就可以測試 Web 應(yīng)用程序性能并進行相應(yīng)優(yōu)化。
具體打開方式是:在Chrome DevTools中通過CMD/Ctrl + Shift + p打開命令菜單。然后輸入Show Performance打開性能面板。
copying & saving 
在調(diào)試的過程中,我們總會有對 Dev Tools 里面的數(shù)據(jù)進行 復(fù)制 或者 保存 的操作,其實他們也是有一些小技巧的!
copy()
可以通過全局的方法 copy() 在 console 里 copy 任何你能拿到的資源
Store as global variable
如果在console中打印了一堆數(shù)據(jù),想對這堆數(shù)據(jù)做額外的操作,可以將它存儲為一個全局變量。只需要右擊它,并選擇 “Store as global variable”選項。第一次使用的話,它會創(chuàng)建一個名為 temp1 的變量,第二次創(chuàng)建 temp2,第三次 ... 。通過使用這些變量來操作對應(yīng)的數(shù)據(jù),不用再擔(dān)心影響到他們原來的值。
自定義 devtools 

大家平時用的最多的Chrome 主題可能就是白色/黑色這兩種了,但用的久了,難免想嘗試像IDE一樣切換主題。
打開方式
·  首先需要啟用實驗?zāi)J街械腁llow custom UI themes
  地址欄輸入如下url
1. chrome://flags/#enable-devtools-experiments # 啟用實驗功能 

·  啟用實驗功能,并重啟瀏覽器      
·  控制臺中使用快捷鍵F1打開設(shè)置,切換到Experiments 選項
·  啟用Allow custom UI themes    

· 從Chrome商店安裝Material DevTools Theme Collection擴展程序       

· 
選擇你喜歡的主題即可

CSS/JS 覆蓋率 
Chrome DevTools 中的Coverage功能可以幫助我們查看代碼的覆蓋率。
打開方式
·  打開調(diào)試面板,用快捷鍵 shift+command+P (mac)輸入 Show Coverage調(diào)出相應(yīng)面板   

· 點擊reload 按鈕開始檢測   

· 點擊相應(yīng)文件即可查看具體的覆蓋情況(綠色的為用到的代碼,紅色表示沒有用到的代碼)

自定義代碼片段 Snippets 
在平常開發(fā)過程中,我們經(jīng)常有些 JavaScript 的代碼想在 Chrome Devtools中調(diào)試,直接在 console 下 寫比較麻煩,或者我們經(jīng)常有些代碼片段(防抖、節(jié)流、獲取地址欄參數(shù)等)想保存起來,每次打開 Devtools 都能獲取到這些代碼片段,而不用再去google,正好Chrome Devtool 就提供了這種功能。
如圖所示,在 Sources 這個tab欄下,有個 Snippets 標(biāo)簽,在里面可以添加一些常用的代碼片段。

將圖片復(fù)制為數(shù)據(jù) URI 
打開方式
·  選擇Network面板
·  在資源面板中選擇Img
·  右鍵單擊將其復(fù)制為數(shù)據(jù)URI(已編碼為base 64)
媒體查詢 
媒體查詢是自適應(yīng)網(wǎng)頁設(shè)計的基本部分。在Chrome Devtools中的設(shè)備模式下,在三圓點菜單中點擊 Show Media queries即可啟用:

Devtools會在樣式表中檢測媒體查詢,并在頂端標(biāo)尺中將它們顯示為彩色條形:

那怎么使用呢?其實也很簡單:
·  點擊媒體查詢條形,調(diào)整視口大小和預(yù)覽適合目標(biāo)屏幕大小的樣式
·  右鍵點擊某個條形,查看媒體查詢在 CSS 中何處定義并跳到源代碼中的定義
keys/values 
這個是Devtools提供的快速查看一個對象的key、values的API。用起來也很簡單:
  ?    你可能會說Object.keys()和Object.values()也可以實現(xiàn)啊,但這個不是更簡單點嗎
table 
Devtools提供的用于將對象數(shù)組記錄為表格的API:



相關(guān)文章

IT外包服務(wù)
二維碼 關(guān)閉
主站蜘蛛池模板: 日韩欧国产精品一区综合无码_亚洲视频日本有码中文_日韩有码一区_免费在线观看黄视频_一区二区三区色_性xxxxfreexxxxx欧美牲交v_美女露出奶头扒开尿口免费网站_91精品大片 | 日韩视频免费在线观看_日本毛片高清免费视频_九九亚洲视频_无码精品一区二区三区四区爱奇艺_欧美人与动交ZOZO_第一视角vk_色呦呦久久_动漫被到爽动漫视频免费 | 无码精品人妻一区二区三区九里奈_成人精品一区二区三区_四虎影视永久地址_爽爽影院线观看免费_伊人久久大香线蕉综合影院首页_国产色亚洲_日本老熟妇乱_好了av四色综合网站 | 凹凸视频国产福利永久_91华人在线_亚洲免费av网站_av白浆_亚洲制服无码一区二区三区_91精产品一区一区三区_国产免费人视频在线观看免费_国产亚洲欧美日韩在线观看一区二区 | 亚州欧美在线_亚洲第一av在线播放_99er在线观看_日本欧美日韩_国产强被迫伦姧在线观看无码_啊灬啊灬啊灬啊高潮了_午夜看片网址_免费一级毛毛片 | 老师黑色丝袜被躁翻了AV_国产性在线观看_国产精品久久久视频_av影片在线_无遮无挡三级动态图_亚洲AV无码片VR一区二区三区_日日干b_欧美一级在线 | 久久亚洲日韩精品一区二区三区_亚欧成人永久免费视频_国产精品中文无码第一页av在线_亚洲国产无色码在线播放_日韩国产欧美精品在线_影音先锋男人在线资源资源网_苍井そら无码AV_欧美激情视频一区二区三区在线播放 | 爱色影wwwcom_亚洲无人区码一二三码区别图片_人妻精品动漫H无码_日本一区二_国产自啪精品视频网站丝袜_在线免费观看毛片视频_爱爱一级_色涩av | 久久婷婷综合缴情亚洲狠狠_久久伦理_欧美日韩视频免费在线观看_欧美国产日韩成人_神天至尊动漫免费观看高清_最近中文字幕在线免费视频_久久久999精品_一级大片免费看 | 欧美日韩中文亚洲_国产有码在线_亚洲精品小视频在线观看_久久精品一级片_丰满人妻一区二区三区视频53_亚洲一区二区av在线_欧美一级片黄色_直接看的69xxx | freemoms熟乱tube_精品精品国产高清A毛片牛牛_国产女主播高潮在线播放_国产乱伦视频_亚洲一区二区日韩_动漫AV纯肉无码AV在线播放_奇米第四色7777_欧美性猛交xxxx黑人 | 成年美女黄网_91se亚洲综合色区_中文字幕亚州国产制服_久久夜色精品国产网站_鲍鱼av_少妇毛片一区二区_四虎影院永久在线观看_欧美自拍偷拍一区 | 亚洲成色WWW久久网站夜月_久久久久久久久久久久国产_日本成人午夜视频_成人夜色视频网站在线观看_成本人h片动漫网站在线看_精品久久高清_91精品国产色综合久久久蜜臀_av伊人天堂 | 麻豆精品A片免费观看_日本黄色片xxxx_综合久久综合_色综合久久中文字幕无码_国内国外日产一区二区_乱中年女人伦视频国产_国产AV国片精品JK制服丝袜_欧美最猛性xxx | 久一精品视频_亚洲欧洲毛片_亚洲精品国产成人99久久6蜜臀_亚洲射逼_五月婷婷久久中文无码_91爱视频_樱花草在线社区WWW_护士巨好爽好大乳 | 曰韩免费视频_中文字幕丝袜第1页_视频精品久久_久久国产午夜精品理论片_成人免费国产精品视频大全_人妻被丑老头玩的潮喷_亚洲av无码国产一区二区三区不卡_天堂亚洲欧美在线中文 | 7777久久香蕉成人影院_日韩人妻熟女中文字幕A美景之屋_wwwjizz欧美_日韩a免费_夜夜躁恨恨躁爱躁_亚洲成在人线AV无码_久久国内免费视频_用舌头去添高潮无码视频 | 精品av天堂毛片久久久_99热com_99re在线国产_夜色爽爽影院18禁妓女影院_亚洲国产片在线观看_麻豆91精品91久久久的内涵_最新中文字幕在线资源_日韩中文幕 | 国产色精品VR一区二区_国产三级精品vs_免费看亚洲片_人人曰人人做人人_一级免费大片_黑人巨大亚洲一区二区久_亚洲色丰满少妇高潮18P_九九热视频在线 | 色偷偷亚洲第一综合网_在线观看的片www免费观看_爆乳一丝丝不挂裸体大胸美女_相泽南亚洲一区二区在线播放_美女裸体无遮挡永久免费视频网站_日韩av激情在线观看_99re超碰_中文天堂在线资源www | 四虎影视国产精品免费久久_农村黄a三级三级三级_天堂亚洲AV在线观看_水莓100在线视频_亚洲人成网站在线播放无码_人人性人人爱_无码高潮爽到爆的喷水视频_国产华人av导航 | 真实国产乱人伦在线视频播放_国产一区二区免费网站_青娱乐这里只有精品_亚洲国产天堂一区二区三区_久久第三页_精品熟人妻一区二区三区四区不卡_日本a片大尺度高潮无码_午夜视频在线观看一区 | 亚洲色图在线免费观看_久亚洲一线产区二线产区三线产_国产免费久久久久久无码_龙珠z中文版普通话_国产又色又爽又黄又免费_japanese日本护士高潮_午夜久久视频_精灵宝可梦旅途中文版免费观看 | 成年人观看免费视频_国产精品免费不_伦理二区_国产中文在线播放_97人人干_裸体丰满少妇做爰视频_aⅴ色欲AV片无码精品小说_日本在线视频二区 | 成人精品毛片_伦理一区二区_神马久久免费_精品欧美一区二区久久久伦_亚洲二级片_91久久网_freeXXXX国产HD中文对白_18禁黄网站禁片免费观看不卡 | 亚洲最大色大成人av_欧美成人小视频_精品视频一区二区三区中文字幕_九色视频网_亚洲国产成人精_亚洲精品v欧美精品动漫精品_欧洲LV尺码大_一区二区三区在线看 | www.久_国产成人在线网址_小视频在线看_91视频免费看片_欧美裸体XXXX极品少妇_免费国产精品视频_草逼网页_99热中文 | 激情久久中文字幕_亚洲经典国产欧美_草草久久久_91看片儿_蜜臀免费av_美女一区视频_97在线视频免费看_内插射精大群交在线 | 欧美日韩一区在线播放_亚洲高清人人爽夜夜爽AV毛片_亚洲成在人线aⅴ免费毛片_亚洲区一区二区_欧美破苞系列二十三_国产初高中生视频在线观看_午夜性又黄又爽免费看尤物_国产精品亚洲第一区在线暖暖韩国 | 国产三级精品三级在线专区1_婷婷伊人网_久久av福利_午夜天堂视频_亚洲国产三级在线观看_伊人成人影视_超碰在线免费97_97视频在线观看播放 | 无码AV一区二区三区无码_国产做a爱一及毛片久久_天堂成人在线观看_国产精品免费区二区三区观看_嫩草com_日韩一二三四区_无码人妻一区二区三区免费_亚洲欧洲综合在线 | 不卡国产_色综合另类小说图片区_午夜久久久久久久久久久_亚洲AV日韩AV鸥美在线观看_挺进邻居丰满少妇的身体_12306影视午夜入口_被男人吃奶很爽的毛片_免费在线视频欧美 | 黄色片子免费观看_国产露脸150部国语对白_久久久久久久久久久国产精品_免费毛片手机在线播放_亚洲欧洲日韩在线_免费无码作爱视频_大地资源网中文在线观看免费节目_亚洲自偷自拍另类第1页 国产AV导航大全精品_日韩欧美综合在线_在线视频国产99_国产婷婷色一区二区三区在线_午夜免费啪视频观看视频_www.68pao.免费视频_久草伦理_精品久久久久久国产三级 | 永久av在线免费观看_后入内射国产一区二区_国产xxxxx精品av青椒_国产网红福利视频一区二区_成人福利在线播放_99视频_国产精品一区二区在线观看99_97视频一二区 | 亚洲av无码专区青青草原_亚洲性射射_欧美乱子伦XXXX12在线_亚洲AV无码精品色午夜果冻_91精品国产综合久久久蜜臀图片_非她不可短剧免费观看_国产精品人成在线播放新网站_av一区二区免费 | 久久国产播_www.狠狠撸.com_国内精品少妇在线播放_打屁股狠网站spαnkvieos_国产农村乱辈无码_国产亚洲精久久久久久蜜臀_2020年国产精品_一区二区三区产品乱码的解决方法 | 2019年中文字字幕在线看不卡_成人免费看网站_亚洲AV无码一区二区三区DV_亚洲综合色自拍一区_国产亚洲色欲色一色WWW_午夜免费观看福利片_色激情综合_国产自啪啪 | 在线日韩AV永久免费观看_熟女chachacha性少妇_欧美日韩一区二区三区不卡视频_国产一二三区在线播放_成人精品人伦一区二区三区水拆_国产太嫩了在线观看_色多多入口_国产资源在线免费观看 | 亚洲福利二区_欧美日韩综合_国产成人综合一区精品_国产爆乳无码视频在线观看3_国产破外女出血视频_无码精品AV久久久奶水_亚洲国产成人精品无码专区_伊人久久大香线蕉AV色婷婷色 | 精品人妻无码一区二区三区手机版_欧美日韩成人精品久久二区_免费成人av网址_免费看片www8x5xcom_内射欧美老妇WBB_掀开奶罩边躁狠狠躁苏玥视频_免费成人高清在线视频_毛片官网 | 亚洲欧洲精品一区二区三区波多野_日韩区一区二_亚洲视频a区_我学生的妈妈在线_五十路熟妇高熟无码视频_91懂色_国产毛片毛片毛片毛片_JAPAN丰满人妻VIDEOS 久久久久高清视频_52avaⅴ我爱haose免费视频_亚洲日韩成人性av网站_黄色影视免费看_JVID亚洲精品无圣光图套_久久国产欧美一区二区精品爱欲_国产精品96久久久久久久_亚洲天堂区 |