1. 程式人生 > >如何使用瀏覽器開發者模式進行除錯,菜鳥心得

如何使用瀏覽器開發者模式進行除錯,菜鳥心得

本人剛進入社會工作2個月,之前雖然有做過一點web 開發但是沒怎麼去學習過,16屆的辣雞就是形容我這種人了,但是現在開始工作了,有些東西不得不學也有時間學了,之前把時間都花在打遊戲上面了。
下面開始進入正題,用瀏覽器開發者模式進行除錯,開啟方法,ie 使用的是快捷鍵f12 ,當然也可以去工具選單裡面找,其他瀏覽器自己看看選單欄找下開發者工具就可以找到了。
開發者模式可以做什麼?
1.可以用來除錯 html ,css 樣式。
css 可以在這裡進行屬性的增刪查改然後等效果符合自己的預期目標時再將改動的程式碼寫回原檔案,在開發者這裡改動樣式是不會影響原檔案的,所以我們可以大膽去做。
下圖是樣式除錯


2 可以在網路選項開啟捕捉請求。

(2)當我們接觸公司比較大型的專案,利用網路請求可以方便理清程式碼的流程,假如專案用的是經典的ssh 模式的話,執行專案後你可以檢視url 字尾為action 的請求再看他響應的正文可以找到 對應的jsp 正文,這可以跟你直接研究程式碼相結合起來快速懂得程式碼的大致思路。
這裡寫圖片描述

3 可以用來為指令碼設定斷點 進行跟蹤。
斷點除錯主要是對你想研究的某塊程式碼進行設斷點,然後利用 執行一行(如果有函式進入函式),執行一行(如果有函式執行完函式) ,跳出函式 3種方法,或者直接執行到下個斷點,沒有斷點就執行到最後,慢慢跟蹤程式碼的執行,將你想關注的變數的值新增到監視或者直接 檢視(比較新的瀏覽器滑鼠移到變數如果該變數已經有值會顯示出來),這樣可以跟你預估的值進行比較或者知道程式碼是不是沒執行到某個本來要執行到的函式,可以幫助你快速找到問題發生的地方。
這裡寫圖片描述


在這裡要吐槽一下頁面錯誤有時候總是執行到庫檔案裡出錯,我自己有時也會被搞暈,只能狂按跳出函式,最後只能結束除錯。重新再調一次。

關於快取,一般用ide 開發然後部署到web 伺服器上面如果只是改動js 檔案,是不需要重啟tomcat ,畢竟太耗時間,不過記得清掉ie 的快取,然後重新整理頁面就可以了,如果改動了java 檔案只是改動變數的值的話也是不需要重啟,因為這樣java 檔案不用重新編譯,如果有需要重新編譯的檔案那麼只能重啟tomcat。

這裡寫圖片描述
另外,搜尋關鍵字是很重要的技能,工作時程式碼自己要學會搜尋關鍵字對應的檔案,在當前檔案搜尋內容,在當前專案,當前包搜尋檔案或者程式碼內容,工作必備技能啊。

這些是目前這陣子的收穫之一,自己研究還是很耗時間的,所以跟大家分享一下,中國的程式碼屆分享意識太差了,為此我花了一個半小時寫了這篇文章,滑鼠今天還有點作死,截個圖總是拖著拖著就斷了,寫得我快成為發狂的綠巨人了,慢慢積累吧。