作為前端開發者都知道，快捷鍵f12可以開啟chrome除錯工具。firefox可以開啟firebug工具。「工欲善其事，必先利其器」，對除錯工具的掌握，能大大提高我們除錯**的效率。因為我平常chrome用的多，這裡就大概介紹下chrome除錯工具在windows下的使用，firefox的話就暫時不做介紹。
快捷鍵
ctrl+o在sources面板中開啟乙個檔案(js,css)
ctrl+p同ctrl+o
ctrl+f查詢當前檔案中的關鍵字
ctrl+shift+f全域性查詢關鍵字
ctrl+shift+e在控制台執行當前選中的**片段，這個方法可以用來在控制台中列印出變數或方法的返回值。
ctrl+shift+o跳轉到指定的方法
elements面板
elements面板是控制dom結構和css樣式的。
位置1：點選後選擇頁面中的任何元素，就會選中相應的dom節點
位置2：toggle device mode切換裝置模式，可以模擬該頁面在各種移動端裝置的顯示情況。
位置3：edit as html,選中某段html**後可以直接編輯這段html**。可以直接拖放節點，自由調整位置。也可以拖拽節點到編輯器。
位置4：delete 直接刪除該節點。
位置5：event listeners可以檢視該元素所繫結的事件。
位置6："computed"面板裡，點選樣式前面的放大鏡圖示，就可以直接定位到具體的樣式。當樣式層級較深，繼承較多時，對除錯頁面的樣式很有幫助。
network面板
network面板是檢視網路請求資訊的。
位置1：filter過濾器，可在輸入框中輸入關鍵字搜尋對應請求的檔案。
位置2：請求檔案的列表裡進行了分類，個人常用的是檢視xhr的分類，檢視ajax請求。
位置3：設定網路的通訊方式。預設"no thirotting"不節流。這裡可以設定斷網模式，或者模擬3g，4g網路等情況下頁面載入的速度。網速可以在"settings"裡面設定。
位置4：列表裡可以檢視每個xhr的消耗時間。如果time超出200ms,需要考慮優化介面。
位置5：面板最底部可以檢視請求的總個數,domcontentloaded的時間，頁面load的時間。
sources面板
sources面板是除錯中最常用的地方。
位置1：檢視頁面中載入的資源檔案
位置2：如果瀏覽器裝了外掛程式，外掛程式所需要的js檔案會在這裡顯示
位置3：使用ctrl+p/ctrl+o 開啟某個檔案
位置4：斷點的操作
位置5：檢視非同步請求時所設定的定時器
位置6：點選右邊的加號，可以增加監聽的變數。不過滑鼠放到js檔案中的變數時也會顯示對應的值。
位置7：設定各種不同的斷點。
當勾選xhr breakpoints裡的any xhr時，頁面中觸發ajax請求時都會中斷。
當勾選"event listener breakpoint" 下的 mouse（滑鼠）下的 click （單擊）事件時，觸發某個按鈕的點選事件就會中斷。
位置8：一般線上的**都是打包後的**，不利於除錯。點選{}後格式化該檔案。
timeline面板
timeline面板是檢視動態流的。在這裡可以測試頁面的效能問題。比如頁面的渲染速度，動畫的流暢度等。
位置1：點選這個按鈕開始record，按鈕變成紅色，再次點選停止記錄。
位置2：選擇記錄生成的圖表模式
位置3：需要記錄的型別
位置4：fps指每秒的幀數，這個可以衡量頁面的渲染速度。如果低於60fps，則頁面可能需要優化下了。如果低於30fps，則頁面的卡頓現象會比較嚴重。
位置5：記錄期間頁面載入的比重。看哪個範圍的值特別大，占用時間最長，然後有針對性的優化。
profiles面板
這個使用較少，先暫時不做介紹。
resources面板
resources面板展示各種資源檔案，包括本地儲存，session,cookies,cache等資訊
console面板
console控制台輸出資訊，console的方法有很多種，包括console.log(),console.info(),console.error(),console.table()等。
settings 選項
勾選下面這個選項後就會在控制台中列印出所有的ajax請求位址。
chrome除錯工具
今天在除錯bug的時候有乙個需求，我需要知道我的 中有哪些地方在修改body的style，然後我想到了dom節點監聽。為body新增斷點然後開始除錯，但是現在的前端技術棧太複雜，即使打了斷點也會跳進第三方包裡。呼叫棧裡有太多無關的js 妨礙除錯。所以你可以選中檔案右擊後，選擇blackbox scr...
chrome 除錯工具的使用
elements chrome devtools 中 elements panel 是審查 dom 元素和 css 的,可以實時修改 dom css.節點右鍵,如下圖,可以 除了右鍵,還可以 ctrl z 撤銷修改 在呼叫堆疊這裡可以切換到堆疊中的任何地方重新執行 右鍵restart frame 如...
除錯工具 之Python除錯工具pycharm
1 pycharm的安裝 pycharm是一款非常好用的python ide，提供專業版和社群版，就像eclipse和myeclipse一樣，專業版是收費的，而社群版是免費的但功能就沒有專業版的功能強大。1.2 安裝 這裡就不必細說，直接next就ok ps 安裝完成後一定要執行 1.3 破解 採用...