Web調試常用操作

在web應用開發中，我們會遇到各種各樣不同的錯誤，使用debug調試會使開發工作更加有效率並使邏輯更加清晰。而且，調試工具也是一個非常好的學習工具，能讓我們更好的觀察運行過程和中間結果，這對於處於學習技術的我們理解一些抽象的概念是非常有好處的。

在web開發中，分為前端和後端。

一、前端

首先，介紹關於前端調試。

關於前端調試，我們分為dom元素、css樣式、javascript，這裏重點是關於javascript的調試。

一般web項目開發者最常用的瀏覽器是Chrome和Firefox 這兩個瀏覽器，本次主要基於Chrome的開發者工具進行調試介紹。

通過，在chrome瀏覽器中按快捷鍵F12或者ctrl+shift+i。

關於DOM元素調試

在開發者工具中Elements中我們可以看到頁面中詳細的HTML標簽，在右側還可以看到標簽的css樣式與其在頁面中的大小間距等。

對於dom元素來說，我們可以通過點擊其標簽來在瀏覽視圖中查看到元素的位置，這對於編寫布局很有幫助，有時候編寫復雜的DIV嵌套布局會出現排版元素丟失等一系列難以改正的錯誤，通過開發者工具我們能夠快速查看其中的位置。

對於錯誤排版嵌套時，我們可以

右鍵標簽元素，會出現如上圖中的菜單，根據菜單內容有，添加屬性，編輯屬性，作為html編輯，刪除元素，復制，隱藏元素等等。

通過開發者工具我們可以在其中修改參數，並且通過刪除或隱藏來調整其中的布局，對於前端開發是有很大幫助，還可以刪除其中多余元素。不過在其中修改並不能修改頁面的原文件，不過修改後的成果可以通過ctrl+s來進行另存為。

關於css樣式調整

對於css樣式調整，chrome裏開發者工具也提供了便利的調試手段，我們選中某一個帶有css的標簽，在其右側會出現它的css樣式

我們可以在其中對css樣式進行修改，對屬性的調整，以便達到所需的標準和要求。

關於javascript調試

Javascript調試是一個重點，在學習javascript時，剛開始因為語法不規範問題經常會遇到，無法達到自己想要的結果。

通過開發者工具，我們可以在控制臺看到我們出現錯誤的語句，和其出錯的原因。

Javascript也提供調試的語句，debugger 語句用於停止執行 JavaScript，並調用 (如果可用) 調試函數。

使用 debugger 語句類似於在代碼中設置斷點。

對於javascript調試，debugger語句執行時，會暫停下面語句的執行，然後我們可以用開發者工具的這些按鈕來進行，按順序分別是

1、停止斷點調試

2、不跳入函數中去，繼續執行下一行代碼（F10）

3、跳入函數中去（F11）

4、從執行的函數中跳出

5、禁用所有的斷點，不做任何調試

6、程序運行時遇到異常時是否中斷的開關

在按鈕下面，這些面板可以監控javascript中變量的值變化，我們可以一步一步的觀察其變化，在watch面板中，我們可以添加自己想要觀察的變量。

在開發者工具中我們也可以點擊行號進行斷點設置，斷點會出現在右側。

這是通過斷點，我們還可以在控制臺輸出信息來看，使用console.log()可以在控制臺輸出。

還可以通過alert（）語句來查看需要的信息。

二、後端

前端調試介紹完了，開始介紹後端調試。對於後端調試，我個人認為調試後端就是調試基本的java程序。對於後端調試我們基於intellj idea 集成開發環境來進行。

我們先來調試一個java程序，來清楚如何使用intellj idea 的調試方法。

在左側行號出點擊可以出現紅色斷點，然後我們在點擊右上角運行三角箭頭右邊的小蟲子，進入調試界面。

調試界面會直接運行你的程序到斷點處，我們可以看出，在代碼界面中，變量後面會出現當前的值。而在下方調試區，也可以看到自己變量的值。

主要是這幾個按鈕。

我們在運行中也可以找到

這些是經常會用到的。依次是

Step Over (F8)：步過，一行一行地往下走，如果這一行上有方法不會進入方法。

Step Into (F7)：步入，如果當前行有方法，可以進入方法內部，一般用於進入自定義方法內，不會進入官方類庫的方法。

Force Step Into (Alt + Shift + F7)：強制步入，能進入任何方法，查看底層源碼的時候可以用這個進入官方類庫的方法。

Step Out (Shift + F8)：步出，從步入的方法內退出到方法調用處，此時方法已執行完畢，只是還沒有完成賦值。

在Variables區，右鍵會彈出如上圖菜單，我們可以使用其功能，添加需要觀察的變量，改變變量值加快調試進度。

然後，再介紹一下

在應用運行的時升級軟件，無需重新啟動的方式有兩種，熱部署和熱加載。

對於Java應用程序來說，熱部署就是在服務器運行時重新部署項目，熱加載即在在運行時重新加載class，從而升級應用。

在IDEA中，設置熱部署熱加載，在Edit configurations中

調整tomcat的。

在後端調試中，IDEA調試功能會更加突出。

我們可以在調試工具裏清楚的看到，傳值與代理等參數，按照一步一步調試有利於理解其中的流程。

還有response、request等在不同時期的不同值的變化。

在chrome中，我們也可以查看此屬性

而在後端調試中，左側的工具欄也可以方便調試。

從上向下依次是：

Rerun ‘xxxx‘：重新運行程序，會關閉服務後重新啟動程序。

Update ‘tech‘ application (Ctrl + F5)：更新程序，一般在你的代碼有改動後可執行這個功能。

Resume Program (F9)：恢復程序，

Pause Program：暫停程序，啟用Debug。

Stop ‘xxx‘ (Ctrl + F2)：連續按兩下，關閉程序。

View Breakpoints (Ctrl + Shift + F8)：查看所有斷點。

在一個就是使用外部工具，這裏就以postman為例。

使用postman發送請求我們可以獲得結果一些參數。也可以利用postman來發出帶數據的請求。

三、總結

上述介紹的只是一部分基礎的調試，一個合格的開發人員應該熟練掌握調試的技巧，以上功能希望大家在開發時，經常使用。通過學習調試，也發現以前對於編寫web應用中，自己的錯誤和因小問題而浪費的時間，引以為鑒。

調試學習筆記