360浏览器审查元素怎样用？360浏览器开发工具使用教程

首先来说说如何打开360浏览器开发工具吧。提醒：要使用360浏览器的极速模式才能使用审查元素功能，用兼容模式是不能使用审查元素功能的。

先打开网站，直接在页面上点击右键，然后选择审查元素；

或者是打开Tools–Developer Tools；当然，也可使用快捷方式，最为简便：打开方式有两种：第一“按F12”，第二：shift+ctrl+i

打开后我们看到的界面大概如下：

360浏览器审查元素使用

360浏览器审查元素一共提供了9大组工具：

1，Elements: 元素/标签 。允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(document Object    Model)对象。此外，还可以编辑这些内容更改页面显示效果；

2，Network: 网络。可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

3，Sources：源代码，该页面用于查看页面的HTML文件源代码、Javascript源代码、CSS源代码，此外最重要的是可以调试Javascript源代码，可以给JS代码添加断点等。

4，Console: 控制台，调试脚本，前端设计调试，显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

5，performance: 性能。这里是性能测试，可以通过查看请求开始和结束的时间，来查找加载速度过慢的原因主要实在哪一部分。

6，memory:记忆。

7，Application：应用，请求。主要是记录网站加载的所有资源信息，包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、cookies)、缓存数据、字体、图片、脚本、样式表等。

8，Security：安全，通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

9，Audits: 审计，分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；

360浏览器审查元素怎样用？

强大的360审查元素开发者工具提供了很棒的提示功能，当我们把鼠标悬停在某些项时，会显示一些很有用的提示信息，有时候我们可以得到意想不到的收获。下面先详细研究一下360审查元素开发者工具9大工具的使用方法。

先来重点讲下Elements工具

1，Elements工具像一把手术刀一样“解剖”了当前页面，我们看到的Elements页面一般像这样子：

360审查元素功能介绍

查看元素的代码：点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置

查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。

当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看：

修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作：包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

Add Attribute: 在标签中增加新的属性；

Force Element State: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用Force Element State强制元素状态，便于调试，

Edit as HTML: 以HTML形式更改页面元素；

Copy XPath: 复制XPath；

Delete Node: 删除DOM节点；

Break On: 设置DOM 断点。

360审查元素功能如何使用

右边栏：实时显示当前选中标签的CSS样式、属性等，一共有以下5小部分：

Styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式；

Computed: 显示开发者工具计算好的元素样式；

Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有Javascript事件监听器，这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。

DOM Breakpoints: 列出所有的DOM 断点；

Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。

查看元素的CSS属性：在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得非常方便。

360浏览器调试工具

在Styles页旁边，有一个Computed页面，这个页面展示该元素经过计算之后的所有CSS属性，即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程。

修改元素的CSS属性：在元素的Styles页面，可以对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页面展示生效，不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。

360浏览器审查元素使用

给元素添加断点：在元素的右键菜单中选择断点选项(Break on…)，选中之后，当元素被修改(通常是被JS代码修改)时，页面加载会暂停，然后可以查看该元素的属性。

元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。

查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数)，大大提高开发维护的效率。

因为讲起来内容太多了，这里先讲下这几个360浏览器审查元素的用法，更多的360浏览器开发工具教程将在后面文章中陆续讲解！