前端教案提交

前端项目开发/前端项目调试.md

+## 前端开发调试文档
+## 前端开发调试文档
+
+#### 前端调试
+
+***视频教程***
+http://114.115.138.98:9497/gjjs-book/assets/videos/fore-end-debug.mp4
+
+##### 1.观察XHR(异步请求)(TODO)
+
+F12打开开发者工具，选中Network，可看到当前页面的所有资源请求。我们只需关注XHR请求，故在过滤条件中选中Fetch/XHR选项，剩下的就是XHR请求了。
+
+![查看请求](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_1.png)
+
+单击其中的某一个请求，可以看到该请求的详细信息，如下所示
+
+![查看请求](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_2.png)
+
+##### 2.观察响应数据
+
+请求响应的结果在Preview和Response栏里，二者展示的形式不一样。
+
+Preview模式
+
+![响应结果预览](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_3.png)
+
+Response模式
+
+![响应结果1](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_4.1.png)
+
+![响应结果2](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_4.2.png)
+
+响应数据的属性：
+
+![响应结果属性](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_5.png)
+
+观察Response请求
+
+##### 3.如何打前端断点
+
+前端项目是通过Webpack进行加载的，我们编写的源文件在 webpack:// 目录下。其中 .vue 文件都在 webpack:///src下，.js文件都在  webpack:///./src 目录下
+
+![源文件](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_6.png)
+
+在需要调试的代码位置点一下，断点就标记完成，后面程序在执行到这一步时会停下来。
+
+![标记断点](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_7.png)
+
+调试的常用按钮
+
+![断点调试](../../../../../assets/images/03-新国结产品开发/image/front_debug_8.png)
\ No newline at end of file