虽然可以通过调试工具的控制台来动态执行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 现学现卖