Web開發常規調試方法與常見問題分析

1、Web項目基本原理

如今的web項目大都已經先後端獨立開發與部署。

先後端獨立開發，通常是前端與後端經過web接口(常見的有RESTful與websocket)文檔進行交流。前端開發人員先更具業務需求與實際原型進行ui的編程實現與事件的設計，並經過web接口進行業務數據的增刪改查。後端開發人員根據定義的接口文檔，實現業務數據的計算與增刪改查，並對持久化的數據（通常保存在數據庫裏）進行操做。

先後端獨立部署，前端項目均爲html5/css/javascript/圖片等靜態資源，只須要web服務器就能夠部署運行。經常使用的web服務器有apache與nginx。後端開發人員則只須要把接口服務發佈到應用服務器，並正確鏈接數據庫。經常使用的java的應用服務器有tomcat、jetty等。

對了，在此聲明下，這裏所說的前端，並不僅是pc站的html頁面，也包括微網站、微信小程序、APP應用等。

2、常規調試方法

根據上面的分工，能夠明顯地web開發中遇到的問題分爲：前端實現問題，接口調用問題，接口實現問題。

a) 前端實現問題

前端實現問題是指，前端在調用接口前或者調用接口後，業務邏輯錯誤或者程序錯誤形成的系統用戶交互異常。針對不用的前端，有不一樣的調試工具。

Pc站與微網站可使用chrome（推薦）或者firefox的開發者工具進行調試。

微信小程序與公衆號可使用微信官方開發者工具進行調試。

APP使用開發環境的真機聯調進行調試。

b) 接口調用問題

接口調用問題，多爲前端調用接口錯誤或者接口自己存在bug引發的，沒法獲取前端人員預期的返回結果。

在開發環境中，可使用上述的工具進行調試。在生產環境中進行故障排查是，pc站與微網站還能夠經過pc瀏覽器進行故障分析。但公衆號、小程序、APP須要經過charles等抓包工具進行分析。

若是沒有接口調用的數據包，則前端程序存在問題；

若是接口的請求參數與請求頭信息存在錯誤，則前端調用接口使用錯誤；

若是接口的響應參數與響應頭信息存在錯誤，則接口實現存在問題；

若是接口調用正常，則前端程序對數據結果處理存在問題。

c) 接口實現問題

接口實現問題，多爲後端開發人員沒有根據正確的請求參數返回正確的響應結果。多由邏輯錯誤、數據持久化處理錯誤與系統級錯誤引發的。

在開發時能夠經過斷點跟蹤就行分析。生成環境須要經過分析系統日誌或者程序的日誌進行分析。

3、常見問題分析

在以上幾大類問題中，有些尤其突出，下面進行詳細分析。

a) 瀏覽器兼容問題

i. 低版本瀏覽器的兼容問題

說到低版本瀏覽器，不得不詬病IE9及其如下的老爺們。這些落後的瀏覽器已經被官方廢棄，卻在中國尚存大量的用戶羣體。並且「國」字號的瀏覽器們也任然使用這些內核。

對於這個問題，儘可能與客戶商量，放棄低版本瀏覽器，在用低版本瀏覽器訪問網站時，提示如今高版本瀏覽器，並提供下載地址。

IE9及如下存在跨域訪問問題；

IE7及如下存在ajax使用的問題；

IE7及如下還存在css三、javascript對象缺失等問題。

ii. Html5新特性的兼容問題

Html5的一些新特性如webrtc、webGL等新特性，即便在新版瀏覽器中也存在兼容問題。響應技術還沒有徹底標準化，選擇一個靠譜的庫很重要。

b) 字體庫跨域問題

字體跨域問題，是html頁面與css文件（字體庫的引入是在css中配置的）不在同一個域下形成的。

解決辦法就是修改web服務器（apache或者nginx）的配置，容許字體庫文件的跨域訪問。或者全部靜態文件都在一個域下訪問。

c) 接口調用跨域問題

i. 普通跨域問題

因爲前端文件與後端接口服務獨立部署，跨域問題尤其突出。Websocket接口還好些，自己就解決了跨域訪問的問題；RESTful的使用須要處理下頭信息，容許跨域訪問（設置Access-Control-Allow-Origin的值，若是省事，能夠設置爲*，但爲了防止接口被濫用，建議配置具體的域規則）。

ii. 僞跨域問題

所謂僞跨域，是指後端框架已經支持跨域訪問，但因爲業務代碼異常或者應用服務器異常，返回的響應信息不符合預期的結果，形成瀏覽器提示跨域問題。

這個問題，最好使用抓包工具，分析響應參數與響應頭信息是否正確。並及時解決服務器或者程序的問題。

iii. 低版本瀏覽器的跨域問題

好吧，又是低版本瀏覽器。IE9及如下的瀏覽器，存在跨域的問題（自己也不支持websocket）。對於這個問題，前人使用的一般是jsonp的方式，但jsonp使用的是get方式，明顯不兼容RESTful的規則。若是使用jsonp，須要前端與後端作些調整。

僅僅爲了幾個老爺級別瀏覽器，改動太多代碼就不值當了。不是跨域嗎？那就讓他們一個域吧。Web服務器（apache或者nginx）除了提供web服務外，還有強大的代理功能，把其餘域的接口服務路徑代理爲與頁面同域的路徑並非件複雜的事。