簡碼編程:Chrome DevTools系列教程28_神奇的DOM斷點

2020-12-17 簡碼編程
簡碼編程：Chrome DevTools系列教程28

簡碼編程發現很多前端人員在前端開發的工作中很多時候並不是去寫JS代碼，而是去模仿學習別人的頁面設計。比如說，學習別人的布局、樣式、配色、交互、特效等。今天我們分享一個研究別人前端樣式的技巧，使用Chrome DevTools的DOM斷點來分析別人網頁上的CSS特效。

簡碼編程：Chrome DevTools系列教程28

打開百度，在「百度一下」按鈕上右鍵「檢查」，會打開Chrome DevTools開發者工具，會自動打開「Elements」選擇頁。

簡碼編程：Chrome DevTools系列教程28

在「百度一下」這一行上右鍵，選擇「Break on -> attribute modifications」菜單項，也就是在屬性變化時下斷點。

簡碼編程：Chrome DevTools系列教程28

添加了DOM斷點後，會在右側的"DOM Breakpoints"上看到剛才添加的斷點。

簡碼編程：Chrome DevTools系列教程28

然後我們把滑鼠移動到網頁的「百度一下」按鈕上，此時會觸發斷點，網頁暫停。在斷點面板中我們看到這個特效是當滑鼠懸停(hover)在這個按鈕上面時，網頁使用JS給此按鈕添加了一個「btnhover」類。

這個DOM斷點功能是經常要用到的前端技巧，請大家一定要學會，並熟練使用。

相關焦點

  • DevTools(Chrome 85)的新功能
    編輯器現在顯示字節碼（十六進位）偏移量最後是斷點，條件斷點和日誌斷點的新圖標[24]。他們的樣子如下：chrome 85中的多色斷點我認為，這提高了斷點圖標的可讀性，尤其是在啟用暗模式時：作者：Esteban Herrera翻譯：瘋狂的技術宅原文：https://blog.logrocket.com/whats-new-in-devtools-chrome-85/
  • Chrome Devtools 高級調試指南(新)
    2、DOM 斷點調試當你要調試特定元素的DOM中的更改時，可以使用此選項。這些是DOM更改斷點的類型：>Blackbox Script剔除多餘腳本斷點。類似的，使用DevTools的工作區設置持久化，將本地的文件夾映射到網絡，在chrome開發者功能裡面對css 樣式的修改，都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達到持久化的效果。
  • Chrome DevTools 全攻略!助力高效開發
    目前 chrome 還是沒有這項功能的，Edge 打開位置：控制臺打開狀態 => Esc打開抽屜 => ···選擇 3D 視圖面板DOM 斷點記住要修改的代碼，在這個文件開頭，也就是 191.xxx.js第一行先打個斷點，push 方法之前再打一個斷點:
  • Chrome 調試工具奇淫技 - OSCHINA - 中文開源技術交流社區
    Network這個板塊，你可以查看頁面所加載的所有資源響應情況，響應時間，瀏覽器等待時間，狀態碼，MINE Type,資源大小等。SourcesSources就是所有資源了，你可以看到頁面加載的資源，圖片，css,js等，它們會按照資源的來源分類。Timeline跟前面的工具相比，Timeline就高級很多了。它可以讓你查看瀏覽器的渲染流程。
  • 簡碼編程:aardio中使用inputBox彈出輸入框對話框例子
    簡碼編程：aardio中使用inputBox簡碼編程經常在軟體開發中遇到一個需求，需要讓用戶手工輸入內容，因為用到的頻次比較少，不想在軟體界面上弄一個文本框讓它輸入，也不想單獨弄一個窗體這麼麻煩簡碼編程：aardio中使用inputBox當用戶點擊了按鈕後，自動彈出inputBox彈出輸入框對話框，您可以在原始碼裡預置標題、提示內容、預置輸入文本等設置項，而用戶需要做的就是輸入內容後點擊確定
  • Chrome 沒插件,香味少一半,用Chrome瀏覽器這些插件怎麼能沒有
    俗話說Chrome 沒插件，香味少一半，Chrome 最大的優勢還是其支持眾多強大好用的擴展程序，使用Chrome瀏覽器的最大魅力就是插件了，今天，小編就來一起盤點一下chrome上那些相見恨晚的擴展。
  • 微信小程序開發系列教程三：微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。
  • Stata:斷點回歸分析教程
    Stata 把 EViews, SPSS 的傻瓜式菜單和 SAS 的命令、編程完美結合起來，所以它一推出就受到了初學者和高級用戶的普遍歡迎。Stata 不僅在統計方面功能齊全，其在計量分析領域更是有著深刻影響，以至於有人一言以蔽之：「 關於學習 Stata 的意義，大家只需知道：目前，Stata 是計量經濟學，特別是微觀計量經濟學的主流軟體。
  • 給你代碼:chrome插件心得
    最近需要做一款chrome的插件，關於chrome插件的種種資料而且很分散其實網上非常少。內容腳本，直接插入到頁面裡的腳本，因為有很多敏感信息或者說危險操作，所以他的api是限定的，只能操作dom和部分chrome插件api。他可以訪問dom但是不能訪問該頁面的其他js，相當於一個額外的沙箱。列印一些屬性就是這些chrome擴展可以用。
  • 使用Sboxr自動發現和利用DOM(客戶端)XSS漏洞
    這一系列的博客文章將向你展示如何在單頁或富JavaScript的應用程式上識別DOM XSS的問題。作為示例，我們將在DOM XSS playground（https://domgo.at）上解決10個練習題目，並為檢測到的問題創建了簡單的概念證明漏洞。這篇文章的內容涵蓋了前兩個練習的設置說明和解決方案。剩餘的練習將在我們發布的其他文章中提到。
  • 乾貨 | 前端調試各種收集—斷點篇
    下載人家的demo運行，點擊登錄之後不出錯頁面也不跳轉；請求數據後填充到頁面，但是頁面卻不顯示數據；某個請求總是被取消；明明按照人家教程來寫，代碼一模一樣，卻得不到和教程一樣的效果；無意中寫錯字母，大小寫部分，
  • 簡碼編程:如何通俗理解javaScript中的三目運算符?
    如何通俗理解javaScript中的三目運算符簡碼編程工作中經常需要用到JavaScript，要閱讀別人寫的JS代碼，所以經常會遇到各種花式語法技巧，其中三目運算符就是比較難理解的一種語法技巧
  • 原生JavaScript的DOM操作匯總
    點擊上面「天碼營」，加入我們，快速成長~「內容簡介」JavaScript的DOM操作也是面試中的常見問題
  • 不知道如何入門編程？最全在線教程網站匯總來了，還不趕快收藏
    地 址：易百教程簡 介：內容比較全面的在線教程網站。地 址：碼農教程簡 介：大量IT編程入門教程(JAVA, PHP, JAVASCRIPT, C, C++, HTML, CSS等)。地 址：簡單教程簡 介：大量IT編程入門教程(前端、移動端、Java、.net等)。
  • shadow dom 101
    介紹其基礎概念、用法、特性，並與 virtual dom 進行簡單比較。中的元素相對獨立，元素 id 不用擔心重複)有作用域的 CSS (CSS 設置不會洩漏到 Shadow DOM 以外，外部也不會滲入)使用聲明式的標籤來組合完成 WEB 組件開發簡化 CSS (可以使用簡短高效的 CSS 選擇器)從另一個角度思考 WEB 開發，由一片片的 DOM 組合，而不是一整個全局的網頁  等一下，我的 chrome
  • 皮卡丘怎麼畫 - 可愛的皮卡丘簡筆畫教程
    皮卡丘（Pikachu）是《口袋妖怪》中的一種神奇寶貝，它全身的皮毛是黃色的，耳朵很長，尖端是黑色的，有一雙黑色的眼睛，臉頰兩邊各有一個紅色圓圈，是小小的電力袋，尾巴是閃電形狀的。皮卡丘遇到危險時就會放電。會把尾巴豎起來，去感覺周圍是否安全。
  • 使用Chrome DevTools有效調試Node.js
    這包括設置斷點和觀看表達式或捕獲應用程式的內存快照。使用Chrome開發人員工具調試Node.js應用程式IDE調試（VS代碼）目前大多數IDE支持Node.js應用程式的調試，如WebStorm，Eclipse或Visual Studio Code。