## **生效樣式**  ## **壓縮js格式化顯示（方便調試）** source（源代碼）源工具找到js文件點擊{}就可以格式化壓縮代碼啦，斷點調試也在這里  ## **斷點調試**  **在開發工具控制臺中輸入`debugger;`，它會立即將內容放入調試器并停止腳本** ## **如何檢查在失去焦點時從 DOM 中消失的 html 元素？** 我正在嘗試檢查表格單元格輸入中的 CSS 屬性。輸入在單擊時出現并在失去焦點時消失，就像我嘗試檢查它時一樣。 當我移動到另一個窗口(檢查器)時，我該怎么做才能不失去焦點？   如果所有其他方法都失敗了,請在控制臺中輸入: ~~~ setTimeout(() => { debugger; }, 5000) ~~~ # 利用谷歌Chrome瀏覽器查看頁面哪些**js**被觸發 和 **事件**在哪觸發 在調試web頁面時，我們想修改某處的js效果，但由于頁面引入的js文件較多，不知道該在哪個文件里去找，這時候可以利用Chrome瀏覽器來幫助我們調試。 ## 如何使用 1.在Chrome瀏覽器中按F12打開開發者工具，切換到`Sources（源碼）`選項卡 2.在`Sources（源碼）`選項卡右側找到`Event Listener Breakpoints（事件監聽斷點）`,勾選你想監聽的事件 3.在`all Stack（函數調用棧）`中觀察 4.排除監聽特定的js文件如jquery   ## 示例 例如本篇博客右側有一個“返回頂部”的按鈕，我們想找到這個按鈕綁定的點擊事件并做修改。  1.在Chrome瀏覽器中按F12打開開發者工具，切換到`Sources（源碼）`選項卡：  2.在`Sources（源碼）`選項卡右側找到`Event Listener Breakpoints（事件監聽斷點）`,勾選鼠標的點擊事件：  3.點擊“返回頂部”按鈕，然后在右側`all Stack（函數調用棧）`中觀察：  點擊調用棧中的斷點，左側將會定位到相應的js代碼處：  點擊圖中的按鈕或者按F11，將會進入到函數內部繼續查看：  也可以點擊圖中的按鈕或F10，跳過函數執行下一行代碼：  可以發現通過以上辦法可以迅速的找到相應的代碼，方便我們定位并修改。當然有的時候并不是那么快就可以找到，需要我們一步一步的點擊并查看。