文章目錄
- 前言：
- 除錯前端樣式
- 控制臺太礙事？
- 添加/修改/洗掉Dom
- 使用控制臺快速搜索\參考🔍
- *給DOM中斷點除錯的操作
- CSS樣式查看與編輯
- 盒型CSS查看
- 動態增加類與偽類
- *CSS數值顏色圖形影片
- 使用除錯控制臺
- 除錯Log日志
- *除錯JS與斷點
- *使用Snippets來輔助Debugging
- * 使用 DevTools 作為代碼編輯器
- Network網路的一些使用
- 跳轉等仍然保留/是否保留快取
- 模擬網速
- 網路排查
- 淺記移動端
前言：
最近在翻翻慕課網有啥不錯的課程：
發現了這個： https://www.imooc.com/learn/1164
想當初最開始學習Web的時候根本知道啥是啥，都是自己搗鼓野路子學的，
這個是免費課，入門還不錯吧，無聊就寫個筆記啥的，
太基礎的我就不寫了～🐶
首發于 https://sleepymonster.cn
除錯前端樣式
控制臺太礙事？
可以選擇放在哪里 有的時候確實礙事，
添加/修改/洗掉Dom
先選擇到對應的再右鍵進入編輯的狀態
使用控制臺快速搜索\參考🔍
使用提供的 document.querySelectorAll('img')
可以使用提供的$xx快速參考
*給DOM中斷點除錯的操作
這個學到了～
這么使用：加上斷點之后在控制臺獲取到對應的節點去修改，然后就會進入斷點～
CSS樣式查看與編輯
查看與編輯直接選中看style就好了，需要知道越往下優先級越低
所以下面有些是默認劃掉的是因為上面的優先級更高
點擊下面的箭頭可以來到源檔案里面去～
下面的{}是用來格式化代碼的～
盒型CSS查看
盒子不僅能看padding等，還可以雙擊修改
下面的樣式是更加細節的，
動態增加類與偽類
這個是設定顯不顯示狀態
對當前節點添加與否一個類
這個可以自己寫個規則然后添加到節點上
*CSS數值顏色圖形影片
顏色啥的都可以動態除錯～
這個學到了～
使用除錯控制臺
- 運行JavaScript代碼，互動式編程
- 查看程式中列印的Log日志
- 斷點除錯代碼Debuging
除錯Log日志
檔案API： https://developer.mozilla.org/zh-CN/docs/Web/API/Console
*除錯JS與斷點
爬蟲有用～ 使用斷點除錯
只要不重繪，現在的代碼就是你的，隨便動～
可以控制原始碼的話 加一句debugger就會停住
debug的含義：
- 從事件進入
- 直接在左側打上
當然斷點的時候在控制臺也可以操作變數， 同樣在保證沒重繪可以在原始碼中修改然后重新觸發事件
直接打好斷點開始觸發事件除錯：
*使用Snippets來輔助Debugging
注入自己的腳本
* 使用 DevTools 作為代碼編輯器
可以把本地的檔案拿進來～ 相當于一個IED了
Network網路的一些使用
這個應該看看都懂了吧～🐶
可以模擬請求，看性能啥的，
跳轉等仍然保留/是否保留快取
把保留日志打開/停用快取
模擬網速
網路排查
可以看到是去/來的網路狀況
淺記移動端
發現了個這個，平時沒太注意右上角的…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/398697.html
標籤：其他
上一篇：Object.entries()
下一篇：JS：物件的淺克隆、深克隆