Chrome 62 開發(fā)者工具新特性

  1. Console 支持 await 操作
  2. 頁面截屏功能（2種）
    • 利用鼠標(biāo)框選
      1. Windows 下按下 Ctrl + Shift + C
      2. 按住Ctrl，鼠標(biāo)直接在頁面上框選
      3. Chrome會把截圖下載下來
    • 截取指定元素
      1. 在開發(fā)者工具的 Elements 中選中需要的元素
      2. 按下 Ctrl + Shift + P
      3. 在打開的 Command 中輸入 node
      4. 在下拉候選項中選擇 Capture node screenshot
      5. 開始下載
  3. 高亮 CSS Grid
    當(dāng) DOM 的 CSS 樣式中有 display:grid 時，會高亮顯示
  4. 新的查詢（query）API
    • queryObjects(Promise). 返回所有的 Promises.
    • queryObjects(HTMLElement). 返回所有的 HTML elements.
    • queryObjects(foo), 假設(shè) foo 是一個類，則返回所有 foo 的實例。
  5. 新的 Console 過濾規(guī)則
    • -<text> 過濾掉包含text的信息
    • url:<text> 只顯示腳本url中包含text的腳本輸出的信息
  6. 可在 Network 中直接導(dǎo)入 HAR 文件
  7. 在 Application 中預(yù)覽 cache
  8. cache 更靈活的調(diào)試
  9. Coverage 加入塊級作用域
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,564評論 19贊 139
  • 在做前端開發(fā)時，我們需要用到一些調(diào)試工具用來調(diào)試我們的HTML、CSS或者JS代碼，俗話說預(yù)先善其事必先利其器，這...
    Rella7閱讀 24,318評論 0贊 15
  • Chrome Dev Tools 是每一位前端工程師開發(fā)調(diào)試的必備利器，稱之為FE的瑞士軍刀也毫不為過。然而，每每...
    擦柱而出閱讀 1,123評論 0贊 3
  • 興許是到了適婚的年齡， 我耳邊常常會有這樣的聲音： “找男朋友（老公...
    一只小遠遠閱讀 651評論 0贊 0
  • 在人生的早期關(guān)鍵節(jié)點上，好運氣對后續(xù)的成功有很大的放大效應(yīng)，而且這種運氣效應(yīng)可以一直累加。 1. 如果你認(rèn)為精英們...
    記憶似雨亦如煙閱讀 313評論 0贊 0

友情鏈接更多精彩內(nèi)容