Chrome开发者工具

Google Chrome浏览器内置了一套强大的开发者工具。不论是做源码分析还是做JS逆向都是比较方便的。

下面是一些开启控制台的方法：

1.按键盘上的F12键

2.按Ctrll+Shifft+I组合键

3.鼠标右键点击网页页面，出现的菜单中选择“检查”

4.在浏览器中右上角的三个点，点击打开菜单，下面的“更多工具”中的“开发者工具”

5.不少做了安全防护的网站都会禁止用户打开开发者工具，可以这样使用：首先在浏览器中新建窗口，使用上述任意方法打开开发者工具，再切换回要调试的页面窗口中。

接下来介绍开发者工具的各大面板及常用方法

Elements面板

在Elements面板中，左侧显示的是源代码的DOM树，可以在这里对页面源代码进行增删改查等操作。右侧展示的是被选中页面节点的层叠样式表（CSS）主要是对页面进行修改美化的。

需要注意的是左侧显示的页面源代码并非是源代码，而是HTML。JS和CSS结合的结果。想要获取页面源代码有以下两种方法：1.使用鼠标右键点击页面，出现菜单后点击“查看网页源代码”。或使用快捷键Ctrl+U键

2.在开发者工具中切换到Sources面板，选择左栏中包含网页地址的HTML文件

在日常的JS中，需要和源代码打交道的地方多是断点操作。在Elements面板中可以进行DOM断点分析，右击页面的任意节点，会发现在Break on菜单项中有以下三种断点

1.subtree modifications：在节点子树发生修改时断点

2.attribute modifications：在节点属性发生修改时断点

3.node removal：在节点被移除时发生断点

更多的关于断点的操作在后续再详细说明

Console面板

Console面板是与网页进行交互的控制台窗口，用于显示DOM对象信息和调试JS代码，熟练使用它将会大大提升逆向速度。

    在Console面板中操作节点的时候，通常需要先定位到页面节点，才可以进行节点操作。输入“$0”可以对当前选中的页面节点进行引用，输入“$1”可以对上一次选择的节点进行引用。

    也可以使用CSS选择器语法对节点进行操作，复制一个需要定位的网页节点的selector路径后，使用document，querySelector或者$方法可以定位顶一个符合语法的节点。

    Console面板中提供了多种方法来观察和检查事件监听器。常用的方法如下：

1.monitorEvents()：监听目标事件信息

2.unmonitorEvents()：停止监听

3.getEventListeners()：获取DOM节点的监听器

monitorEvents()的第一个参数是监听事件的对象，第二个参数是要监听的事件字符串或者字符串数组。以监听百度首页的“百度一下”按钮为例

首先在Elements面板中选择按钮

点击左上角的按钮，该按钮的意思是从页面中选取元素

点击“百度一下”按钮后在Elements面板中已经将按钮设为“$0”

返回console面板，输入$0,查看选择的当前节点的元素

元素为按钮

这时候可以输入监听语句对百度一下按钮进行监听

monitorEvents($0, 'click');

然后在网页中点击按钮

只要没有取消对目标节点的事件监听，在每次和页面交互的时候，控制台上都会输出监听信息。

要停止监听事件，需要使用unmonitorEvents()方法。参数是要停止事件监听的页面节点

unmonitorEvents($0);

输入该指令后，点击页面上的按钮，就不会再出现以click方法的监听信息了

原文始发于微信公众号（HK安全小屋）：JS逆向基础-开发者工具的详解（1）