雖然可以通過調試工具的控制台來動態執行JS代碼,但有時候卻遠遠不夠用.
特別是當產線環境不能隨意修改文件情況下,用線上環境來調試本地代碼更是迫切的需求.
(往往本地測試通過,上線後卻是各種bug.)
今天分享一下如何用Fiddler來修改並調試線上的JS代碼.
以博客園首頁為例子,用我本地的一個js文件來替換它的一個js.
查看首頁源碼發現一個js,就拿它開刷了.
打開fiddler,捕獲博客園的首頁請求. 找到「aggsite.js」的請求.
這里有個技巧,可以通過 「select」命令來篩選js請求. 在下面的命令框輸入「select script」回車即可. 如下圖.
接著把這個請求拖動到「AutoResponder」面板.
拖動之前記得先勾上 「Enable automatic responses」和 「Permit passthrough for unmatched requests」.
然後在Rule Editor的第二下拉框選擇 「Find a file」來選擇本地的JS文件, 選擇後點 Save.
這里我用本地的「test fiddler.js」來替換博客園首頁的「aggsite.js」.
「test fiddler.js」內容如下. 就是向body追加一段紅色文字.
$(function(){
var p=$("<p/>").text("這是fiddler加上的JS").css("text-align","center").css("color","red");
$("body").prepend(p);
});
B. 瀏覽器上的3D—WebGL和Three.js
WebGL是什麼
WebGL，全稱為Web Graphics Library，是一種3D繪圖協議。它允許將JavaScript和OpenGL ES 2.0結合，通過增加一個JavaScript綁定，WebGL可以在HTML5 Canvas中提供硬體加速的3D渲染。這使得Web開發人員能夠利用系統顯卡在瀏覽器中更流暢地展示3D場景和模型，創造復雜的導航和數據可視化，且無需開發專用的渲染插件，適用於創建具有復雜3D結構的網站頁面或3D網頁游戲。
WebGL的工作原理
WebGL主要通過點、線、三角形進行基本繪圖，復雜圖形則通過三維軟體導出頂點坐標，通常存儲在顯存中以加速GPU讀取。頂點坐標通過頂點著色器由OpenGL ES編寫，JavaScript定義並傳遞給GPU生成三角形。頂點著色器處理頂點坐標轉換為屏幕坐標，包括應用投影矩陣將三維坐標轉換為屏幕坐標。片元著色器負責給模型上色，計算模型的顏色、質地、燈光等，生成像素，完成整個渲染過程。
WebGL完整工作流程
WebGL工作流程分為准備數據、生成頂點著色器、圖元裝配、生成片元著色器和光柵化五個階段。准備數據階段提供頂點坐標、索引、UV坐標、法線等數據；生成頂點著色器階段由JavaScript定義頂點著色器程序；圖元裝配階段GPU根據頂點數量運行頂點著色器程序，生成最終坐標；生成片元著色器階段處理模型顏色、質地、光照等；光柵化階段通過片元著色器確定每個像素顏色，最終完成渲染。
three.js是什麼
three.js是一個基於WebGL的庫，封裝了3D渲染需求中的重要工具和渲染循環。它簡化了WebGL的介面，降低了學習成本，使開發者能夠更加輕松地創建3D應用。three.js處理WebGL的大部分細節，提供了人類可讀的3D API，使開發人員能夠更加專注於創意和設計。
推薦資料
了解three.js的更多信息，可以參考以下資源：
three.js - Javascript 3D library（官方網站）
three.js / documentation（官方文檔）
Three.js 中文文檔（內容可能不全或過時，僅可作為參考，請以官方英文文檔為准）
three.js / examples（官方示例）
github.com/mrdoob/three...
專欄：THREE.JS源碼注釋 - CSDN博客（十分詳細的源碼解讀）
【官方雙語/合集】線性代數的本質（基礎知識，關於矩陣）
參考文章
深入理解WebGL&Three.js工作原理 - cnwander - 博客園
three.js 現學現賣