关于前端如何高效使用console

前言

最近我司让我维护一个旧项目。使用jsp编写,而且维护了三四年之久的老项目。最重要的是前后端并没有分离!!!
维护这类项目,脑子里一下子闪过水管动图....
但是!做为程序猿,我们是不会说不的~

分析

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

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

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

工具

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

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

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

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

控制台搜索事件

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

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

clipboard.png

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

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

clipboard.png

....待续

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章