一、Web項目基本原理

現在的web項目大都已經前後端獨立開發與部署。

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

前後端獨立部署，前端項目均為html5/css/javascript/圖片等靜態資源，只需要web服務器就可以部署運行。常用的web服務器有apache與nginx。後端開發人員則只需要把接口服務發布到應用服務器，並正確連接數據庫。常用的java的應用服務器有tomcat、jetty等。

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

二、常規調試方法

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

a) 前端實現問題

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

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

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

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

b) 接口調用問題

接口調用問題，多為前端調用接口錯誤或者接口本身存在bug引起的，無法獲取前端人員預期的返回結果。

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

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

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

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

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

c) 接口實現問題

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

在開發時可以通過斷點跟蹤就行分析。生成環境需要通過分析系統日誌或者程序的日誌進行分析。

三、常見問題分析

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

a) 瀏覽器兼容問題

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

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

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

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

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

IE7及以下還存在css3、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服務外，還有強大的代理功能，把其他域的接口服務路徑代理為與頁面同域的路徑並不是件復雜的事。

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