关于前端如何高效使用console

前言

最近我司让我维护一个旧项目。使用jsp编写，而且维护了三四年之久的老项目。最重要的是前后端并没有分离！！！
维护这类项目，脑子里一下子闪过水管动图....

但是！做为程序猿，我们是不会说不的~

分析

拿到这类项目，一般逻辑性都非常强。每个js文件都会嵌套着另一个js文件里的方法。这种情况下，我们该怎么办呢？

1、首先我们需要整理清楚项目逻辑，不要着急看代码。将功能自己整体走一遍。
2、整个项目整理清楚后，可以从单个页面开始，查看代码。
3、从单个按钮，单个事情开始一条线整理代码逻辑。

这些就是我查看旧项目的一个逻辑。不要轻易动祖传代码！不要轻易动祖传代码！不要轻易动祖传代码！

工具

查看祖传的代码，我们得好好的借助我们的开发者工具。那你真的知道如何更高效的使用开发者工具嘛？

以我修改历程为例，我想知道单击保存后，都做了哪些事情。

1、我需要知道 保存按钮的类名，或者ID

2、根据类名、ID查找到对应的事件

3、根据事件找相关联的其它事件

事件查找

根据类名、ID查找到对应的事件。这一步，如果你连这个事件在哪里，甚至不知道这个事件叫什么名字的情况下。有两种解决方法

• 打开控制台，ctrl+shift+f。下面就會展示出这个类、ID都在哪些文件里出现了

第二种方法是小编亲自想出来的~稍微复杂一丢丢~

• 控制台 Network 选项卡是个神奇的东西。只要是参与了请求的文件或者接口都会显示在这里。
• 我们可以只选择JS,查看这个页面中都有哪些JS文件参与了进来。
• 我们可以找到这些JS文件，可以直接点进去某一个JS文件，在这些文件里进行搜索。

通过断点找关联函数

找到对应的事件后，这个文件，可能还用到了其它文件的方法。当我们需要知道这个方法来自哪个文件时，我们可以打一个断点
举下简单的栗子

页面上有一个按钮，点击后调用了getAnther函数，getAnther里又调用了其它文件的getNumber函数

这时，你想知道getNumber函数里，都做了哪些操作，你想定位它具体是哪个文件的

你就可以在左侧，有一数字，即代码行号的位置，单击一下对应的行号，即可出现以下的蓝色箭头。这表示，你在这一行，打了一个断点。
当程序运行到这一行时，会停止。

这时，你单击按钮，运行一下程序。程序运行到这一行时，会出现以下的状况。程序停止在这一行。
我们将鼠标移到该方法上面，会出现关于这个方法的信息。上面显示函数所在的文件，下面显示函数名。
点击上面显示的链接，就可以直接找到该方法所在的具体位置。

关于断点的更多介绍，可以看朋友之前发布的一篇文章，讲的更为详细。这里我只是根据自己的使用情况做一个简单的记录。
传送门

找元素

额，可能有的人会不可思议，你连哪个元素都不知道，怎么看的代码，怎么执行的事件。耿直一点的会直接跟我说：元素审查了解一下。

当然，元素审查确实可以找到大部分的元素。但是，现在大部分的页面都会使用各类的框架，框架有一个很重要的特点，就是一层套一层。可能你审查定位的元素，并不是事件中使用的元素。

这种情况下，你可以直接在Elements选项卡下， ctrl+f 直接搜索，定位。当然前提是你知道这个元素大概的类名

其实，不管在哪个选项卡下，都支持 ctrl+f 快速查找。方便我们定位

个人公共号

对我感兴趣的盆友，也可以关注我的个人公众号---小嘀咕影院官网。会不定期更新技术知识，旅行游记以及影视推荐哦**