前端工程师的调试技能

在学习前端的时候，不会进行前端的调试是一件非常痛苦的事情，因为需要反复的编译才可以看到是否实现需求，达到想要的模样。

也只是偶尔用console.log进行调试，调试技术并不擅长，所以查了相关的资料，对前端调试的方法做一个总结和梳理：

----------------------------------什么是调试---------------------------------------------

调试（Debug）是发现和减少计算机程序或电子仪器设备中程序错误的一个过程。（来自维基百科）

调试很多时候是用来找到代码中的错误，并具体定位错误的位置。不过，现在前端的框架都比较人性化，可以和大部分后台框架一样提醒错误的位置，我们只需要借助浏览器的调试，就可以找到错误的行数，并查看错误的原因。

也有时候，调试被用来为下一步编程提供理论依据。比如在应用运行的时候，我们可以使用浏览器打个断点，并在console中输入代码调试下一步要做的事，最后再把这些代码复制到IDE或者编辑器上即可。

-----------------IDE-----------------

IDE是什么？标注一下：

IDE，Intergrated Development Environment，集成开发环境，用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和用户图形界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套，所具备这一特性的软件或软件套（组）都可以叫做集成开发环境。再具体就是比如微软的visual studio（来自百度百科）

----------------IDE end-------------

----------------------------------------最开始--------------------------------------------------

对于支持在线调试的开发环境来说，可以打断点，看程序是否运行到这个逻辑，可以按下一步按钮，看程序运行到哪，并实时预览变量的值。

对于不支持在线调试的开发环境来说，没有屏幕，不能用printf来输出结果，就通过sd卡的文件系统来写入日记，再在计算机上读取日记来分析，只是麻烦，但是对于没有sd卡的开发板，还需要腾出几个脚本接上sd卡，那么对于不能用sd卡的芯片，，，就只能依靠我们的想象力了！（反正我不知道什么叫想象力调试- -#）

现在开发web应用的时候，上述的内容都只是基本调试，有一些可以支持更高级的调试，

比如评估表达式，即利用当前的变量值来实时计算，慢慢的完成下一步代码，在用Intellij Idea写程序时，在后台编程使用evaluate expression，可以再调试代码的时候同时实现功能。

然而在前端领域，这是基本的调试功能，Chrome、Safari 这些现代浏览器上都可以这样做：

与单机应用相比，让web应用不能正常运行的原因有很多，而且很多时候与代码无关：

比如服务在运行中崩溃，没有向前端返回数据的时候，前端只能使用超时来处理，这时可以通过浏览器的network来知道这事；

再比如本地开发的时候，url编码是没有问题的，而在线上则出现了问题，经过一系列的复现和排察，才发现问题出在Nginx 上的转义上；

等等很多……

这时候，我们就需要更好的工具来辅助我们开发~

-----------------------基本调试技巧：实时调试------------------------

 Chrome 浏览器的调试窗口：F12可以打开开发人员工具，或者

1.Windows/Linux操作系统：使用Ctrl+Shift+I打开

2.Mac OS操作系统：Command+Option+I打开

调试工具的左上角有两个图标，分别是：

1.审查元素。可以让我们检查页面上的DOM元素，了解DOM结构

2.设备工具栏开关。在设备工具栏里，可以模拟不同的移动设备屏幕、网络状态等等内容。在做移动端web开发的时候经常会使用到。

在平时的工作中，使用的最多的就是调试样式和代码，这也是一个前端程序员所必备的技能。

-----------------------实时调试样式------------------------

开发前端页面的基本步骤：

1.在浏览器上编写HTML和CSS

2.将编好的HTML和CSS复制到代码中

3.重新加载页面，看样式是否符合需求

4.如果还有偏差，重复上述步骤

而当我们想要查看页面上某个元素的DOM结构或者CSS样式时，我们可以点击开发人员工具上的inspect图标，并在页面上选择相应的元素

也可以使用快捷键：

Windows/Linux操作系统：使用Shift + Ctrl + C

Mac OS操作系统：使用Command+ Ctrl + C

很简单的发现工具栏中的Elements菜单自动被选上了，因为我们要选择的元素是属于Elements下的。当然，也可以再Elements中选择我们要查看的HTML标签，查看他们在页面上的位置。他们是相互对应的，当我们选择一个元素时，会自动选中对应的元素。

编码时，可以再左侧的Elements区域编辑HTML，在右侧的Styles可以查看元素的样式，Computed可以查看元素的盒子模型，Event Listeners可以查看元素的监听事件，等等。

由于CSS样式存在优先级，比如越精准的样式越优先，位置越近的样式越优先这样的。所以在复制的前端项目中，右侧的样式区域总是很复杂，一层嵌套一层的结构，有时的样式需要共享，有时需要更精准的选择器去设置样式，所以更改起来的难度还是有的。

-----------------------实时调试代码------------------------

和静态语言相比的话，JavaScript的调试就简单了许多，可以在运行的时候调试代码。

只需要在浏览器相应的位置打一个断点，再执行代码，等到代码自动停在断点处就可以了！

从工具栏中的Sources就可以进入到这个界面，左侧的部分会显示当前页面的代码和资源，比如HTML、CSS、JavaScript以及图片等，这些资源都是由当前页面的Html加载来决定的，如果是单页面应用，就会加载全部的资源。

调试的时候，我们只需要：

1.选择相应的代码文件

2.在相应的行数打上断点

3.刷新页面，执行代码，就可以开始调试

这时，只需要把鼠标移动到正在调试的变量上，就可以预览当前的值，

我们也可以再Console里对这些值进行实时的处理，当业务逻辑非常复杂的时候，我们可以用这个功能来实时的编写代码。

-----------------------移动设备调试------------------------

从几年前开始，越来越多的公司把Moblie First作为第一优先级进行技术转型。

那么对于前端开发的我们来说，就要进行响应式的布局，需要处理不同分辨率，处理不同操作系统，写更多代码，出现更多的bugs。

越来越多移动端功能开发的需求，那能提供很好开发体验的工具就会很受欢迎，所以浏览器厂商纷纷提供更好的浏览器开发功能：

或者可以模仿真机的分辨率、User Agent等基本信息；或者可以提供串口连接真机，允许开发人员在上面进行调试

在模拟器上开发的特点：我们可以一次开发匹配多种分辨率的设备，但是不能发现应用在真机上运行时才可能出现的bug，比如Android设备的后退键。

而在真机上则要求我们一台设备一台设备的调试，这太恶心了。

所以，最理想的开发模式是：

先在浏览器上进行响应式布局设计，再在真机上进行调试。

-----------------------模拟真机：设备模拟器------------------------

为了适配不同分辨率的设备，我们会使用media query(媒体查询)进行响应式的设计，区分四种屏幕(超小屏 <768px；小屏 <992px；中屏<1200px；宽屏 >1200px)。

屏幕大小只是用来判断的一部分依据，还有一部分通过User Agent。它包含了客户端浏览器的相关信息，有使用的操作系统版本、浏览器的版本、浏览器的渲染引擎等等，看浏览器的User Agent的方法：about:version 

我们可以根据这些信息去确定设备是桌面设备还是移动设备，是IOS手机还是Android手机。

我们所需要做的，就是打开开发人员工具，点击设备工具栏图标

在使用它进行调试的时候，我们可以自定义屏幕的大小， 也可以使用一些主流的设备进行响应式开发，比如iPhone。除此，我们还可以测试不同的网络环境，如4G、2G环境下使用，又或者是离线环境下使用。

    

如果只是适配不同屏幕的设备，用这个功能就足够了。而当我们需要做一些设备相关逻辑的调试时，还是需要在真机上进行调试。

-----------------------真机调试：Device Inspect-----------------------

进行响应式设计时，是不需要用到这个功能的，但当解决Android系统后退键的bug时就要用真机进行调试。

对于移动单页面来说，我们需要创建一系列的UI、事件和行为。理论上，我们需要保证用户在全屏的情况下，像一个移动应用一样运行。除了一般的应用功能，我们还需要在页面上创建一个返回键来回到上一个页面，这时，我们就需要处理Android设备上后退键的bug：

那么要先判断是不是Android设备；

再判断按下的返回键是设备上的键，而不是浏览器上的键；

如果是设备上的返回键要进行特殊的处理，避免用户退出应用。

这时我们就需要连接上真机：

1.在浏览器上打开chrome://inspect/，进入移动设备调试页面

2.在手机chrome浏览器上敲入要调试的网址

3.随后，我们就可以像在桌面浏览器调试一样，去调试代码。

同理，对safari浏览器来说也是类似。除此，safari浏览器又更有意思的功能：即使正在开发的是一个混合应用，safari也可以对此进行调试，在开发混合应用时，我们总会遇到很多奇奇怪怪的bugs。

-----------------------网络调试-----------------------

在前后端web应用开发的初期，前后端进行交互是一件非常痛苦的事情，会出现很多各种各样的异常。

我们需要查看参数传递的过程中，是否出现漏传、传错值或者出现跨域问题等等

chrome里的开发人员工具的Network不仅可以查看页面的加载速度，还可以查看我们发出请求的详细信息、返回结果的详细信息和我们发送给服务器的数据。

用Network，我们可以清楚的看到请求的url、返回的状态码，由此，我们可以知道出现的错误到底是服务端的错误还是客户端的错误。

设计表单时，我们也可以看到发出的参数是否正确。表单提交，就可以找到是哪里出现的问题。

-----------------------使用插件调试-----------------------

在chrome应用商城里有很多，

大牛在文章里只推荐了两个：

一个是Postman，用于调试API的。

一个是google的Page Speed，帮助我们优化网络。

-----------------------总结-----------------------

总结了，发现chrome浏览器真的是前端开发比较好用的工具，

它还有很多其他功能，文中没有写出来，比如Application菜单栏可以看到应用相关的一些缓存和存储信息。

还可以看到Local Storage、Cookies、Session Storage、IndexedDB、Web SQL等等用于存储数据的工具，编写单页面应用时，我们需要在客户端存储一些数据，就可以用到这些工具。

除此，我们还有Google PWA应用的一些相关属性：Manifest、ServiceWorders等等。

还有很多很多，看来我要学习一下怎么用github了，在 GitHub 上可阅读最新内容：https://github.com/phodal/fe