资讯频道 → Web前端
阅读更多

2顶
6踩

Web前端

转载新闻 Web Inspector 网页审查工具介绍，可媲美firebug

2011-04-06 15:23 by 正式编辑 fm_2010 评论(10) 有8300人浏览
Web Firebug
其实除了 firebug 之外，在其他浏览器上，也存在 Developer Tools、Dragonfly 等等开发者工具。在此简要介绍一下 Web Inspector（网页审查工具），希望可以方便大家在多领域进行网页开发。

开启方法：

在支持该功能的浏览器上（Chrome/Maxthon3/Safari），点击右键，调用“审查元素”：



点击“审查元素”开启后的界面如下：



在工具窗口右侧，显示的是被选元素的style样式信息。
例如我在上图中，左侧选中的是<body>标签，这时候，就可以通过双击右侧对应该元素的style值，(拿background测试)来修改该选择器的属性值。也可以通过“勾选”的方式，取消掉body上的color值：



当然，左侧的内容也一样可以修改的。
修改之后的内容，会实时的显示到页面中去。
我们可以通过该功能搞一些恶作剧。
例如将某新闻中的人名，双击修改成朋友“大黄”的名字，再截图发到群里：



资源（Resources）面板

在这可以看到从网络上下载的所有资源。打开资源面板的时候，通常会看到如下的界面：



由于资源跟踪会对性能产生一定影响，可以选择只对本次会话进行追踪还是对所有会话都进行资源跟踪。选择只对本次会话进行追踪（Only enable for this session），点击启用资源追踪（Enable resource tracking）按钮，会看到如下的状态：


这是加载此网页使用网络资源的时间表。每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间（Latency），即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每个部分所花销的精确时间。
图中紫色和橙色的两条垂直线分别代表 DOMContent 加载完成和 Load 事件被触发的时间点。在了解了网页各部分加载所花费的的时间后，我们可以进行有效改进从而提高网站的效率。

位于时间表上方的横轴，列出了可供选择的不同类型的资源，在这可以选择查看ALL所有资源，或仅查看某一类(例如Images)的资源。通过时间表下方的左侧菜单，可以按照加载时间或者文件大小，来指定排序的方式。

脚本（Scripts）面板

下图中标注了在脚本面板里的几个主要功能。
我们可以在右侧添加所需观察的变量（Watch Expressions），来进行跟踪变量值的变化，也可查看堆栈调用情况及变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的值。设置断点后按 F5 刷新，页面会在执行到断点语句处停下。


时间轴（Timeline）面板

时间轴，顾名思义就是告诉我们载入页面在哪花了多少时间。它为网页及网络应用程序做了一个详细的性能分析。从加载资源到解析 JavaScript 脚本、计算样式表及页面渲染的所有步骤，都可以在这里看到它们消耗的时间。

首先把“黑点”，点成“红”的，然后刷新页面，可以得到如下的报表：


剖析（Profiles）面板

剖析面板由 CPU 分析器和堆分析器组成，它能够帮助我们了解网页和网络应用程序的执行时间和内存使用情况。（maxthon将在下一版本实现这个功能）
  •     CPU 分析器显示的是 JavaScript 脚本里的每个函数分别占用了多少执行时间
  •     堆分析器显示每个 JavaScript 对象所使用的内存大小


存储 (Storage)

通过存储面板，我们可以与 HTML 5 的数据库存储和 cookie 进行交互。可以检查当前页面打开的所有数据库的内容，也可以在这些数据库中进行 SQL 查询。

使用介绍：
打开 Webkit 演示页，新建三个便条。
这样，再打开“存储面板”中的“数据库图标”，会发现此页面建立了一个名为“WebkitStickyNotes”的表，点击此表，可查看里面所有的记录。当然也可以敲sql命令SELECT * FROM WebKitStickyNotes得到同样的数值：

控制台 (Console)

控制台可与其它面板联合使用，我们可以借助它来审查 DOM 元素、调试 JavaScript 代码、查看 HTML 解析错误等。例如我们想查找id为wrap的元素，只需要输入$(‘wrap’)，还可以通过 &0 选中最近选中的元素，$1 选中前一个选中的元素。而使用 inspect() 语句可以获得当前窗口或页面中的对象，例如输入 inspect(window.navigator.userAgent) 可获得当前浏览器信息。其他还有dir() 、dirxml() 等等各种东西，各位不妨亲自一试：
  • 大小: 21.8 KB
  • 大小: 27 KB
  • 大小: 22.8 KB
  • 大小: 29.3 KB
  • 大小: 23.3 KB
  • 大小: 23.4 KB
  • 大小: 21.2 KB
  • 大小: 16.6 KB
  • 大小: 12.6 KB
  • 大小: 33.6 KB
  • 大小: 16.6 KB
来自: 崔凯的博客
2
顶
6
踩
评论 共 10 条 请登录后发表评论
10 楼 grandboy 2011-04-11 18:47
我一点都不喜欢chrome那种风格的查看, 喜欢看firebug的那种界面设计. 可能是看习惯了.
9 楼 icedblog 2011-04-07 16:20
山寨，广告贴
8 楼 darkbaby123 2011-04-07 10:56
看了评论才发现是Maxthon……这玩意就是webkit引擎自带的工具，所有基于webkit的浏览器（Safari，Chrome）都有，而且几年前都有了……
7 楼 mysyche 2011-04-07 09:49
就是chrome上的。
6 楼 Wallian_hua 2011-04-06 22:12
应该就是chrome 自带的那个。。
5 楼 guoxu1231 2011-04-06 19:41
亮点是第四张图~~~~
4 楼 ebeach 2011-04-06 17:55
有Maxthon3神马事情？
3 楼 java_eye_1 2011-04-06 17:31
webkit !! 
2 楼 liuruncheng 2011-04-06 16:22
我靠，山寨文化害死人啊，一点创意都没有
1 楼 solenovex 2011-04-06 15:57
这个不是chrome自带的那个吗?

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • WebGL-Inspector, 高级web调试工具包.zip

    WebGL-Inspector, 高级web调试工具包 WebGL是由 gDEBugger 和 PIX inspired的工具，目的是使高级web应用程序的开发更加容易。 Firebug和开发者工具对于 html/js来说是什么，web检查器是。特性在现有应用程序中嵌入...

  • 集成与构建指南（10）

    1.1         项目系统集成发布的实施方案项目最终产品即目标系统由各个构件和引用的第三方开发包共同组装而成，可以认为其源码就是各构件的源码，必须纳入配置管理只剩下构建脚本和专门用于验收测试的代码。针对上述特点，本项目对系统的源码结构组织如下图所示： 目录说明备注build构建脚本纳入配置管理

  • 代码构建管理

    构建脚本的版本化，可复用程度，影响脚本的的稳定性，正确性。所以对于各个应用的构建脚本，要实现版本可追溯，同中类型代码语言构建脚本的可复用性。 1. Jenkinsfile Jenkinsfile 是一个包含 Jenkins Pipeline 定义的文本文件，并被检入源代码控制。下面将会介绍 Jenkins 如何使用 Jenkinsfile 和 SVN/GitLab 进行构建脚本管理。 ...

  • 每日构建与持续集成联系与区别

    每日构建与持续集成联系与区别 1）持续集成（Continuous Integration）贵在速度，强调一个快速反馈。 比如我一签入代码，就立刻集成，给我一个反馈，我要知道我的代码是否破坏掉了构建。 持续集成是和单元测试结合在一起的，也就是说一般持续集成的时候都要做单元测试。但持续集成中不能加入更多影响“快速反馈”这条宗旨的东西，比如不能加入大量的集成测试，冒烟测试的代码，尤其是当这...

  • 构件 详述

    构件详述

  • 【北邮国院大三下】Software Engineering 软件工程 Week2

    北邮国院软工PPT知识整理 Week2

  • 组件DOM审查工具Componentinspector.zip

    Component inspector 是组件 DOM 审查工具，支持 ReactJS 和 Backbone.js。ReactJSBackbone.js 标签：Component

  • SIP模拟工具 SIP Inspector

    SIP Inspector 是一个用来模拟不同的SIP消息和通讯情景的工具，可用来创建 SIP 信令、定制 SIP 消息以及兼容输入和输出的消息包，该工具还可以直接从 pcap 文件中播放 RTP 流。

  • iOS开发- 手机 iOS 14版本无法通过网页检查器(Web Inspector)调试网页的问题

    解决方法 finder 前往~/Library/Containers/... ... 添加 key为IncludeInternalDebugMenu ...此时直接修改可能会报权限不够，可以把此文件复制出来一份，然后修改后，再覆盖 ......

  • Web黑客工具箱之FireBug：洞悉复杂Web应用

    Web黑客工具箱之FireBug：洞悉复杂Web应用 2008-10-30 19:58 本文转自:http://netsecurity.51cto.com/art/200810/94891.htm&lt;br /&gt;Firefox扩展Firebug是一个全功能的Web 应用程序调试器，可以协助Web...

  • 集成与构建指南（6）

    1          集成构建基本流程1.1         概述在构建开始前，构架师应当确定项目初步的基本源码包组织结构，和包之间的依赖关系等，并定义项目统一的构建目录结构。构架师还应指导集成员制定集成构建计划，以确定集成的内容、构建周期和日程表。在项目构建阶段初期，构架师应密切参与或直接承担集成的工作，从而为项目源码结构确定演进的方向；其后还应给予足够的关注，并经常性地修订和维护源码目

  • 【软件工程】持续集成：如何建立百万行级代码的版本构建系统（五）开发计划

    预算、指标、人力、里程碑点

  • 产品集成构建

    项目负责人要设立产品开发的里程碑或者基线，能够随时对产品的完成状况进行汇报。 对于每个里程碑和基线，必须保证产品是可使用的，不能出现超过3处的断路使得产品不能正常使用。 项目负责人需要编写定期的工作计划，安排好工作人员和工作任务，设置检查时间点（一般以三天为宜，也可以5个工作日为周期）。 项目负责人编写的计划中必须包括研发活动和管理活动，研发活动如正常的开发、测试，管理活动包括了对产品...

  • 构建与持续集成概念

    1、构建和持续集成：快速和重复的为各种环境产生高质量的二进制部署工件的过程。 2、一个基础典型的构建周期例如：清除》编译》测试》打包 3、构建和CI的优势主要在于：重复性，尽早反馈，一致性，依赖管理。 4、最好不适用IDE构建工件，使用IDE构建工件产生的是与IDE环境设计相关不可重用的构建。 5、Maven3是流行的Java及JVM语言相关构建工具采取了惯例由于配置的策略，他的设计理念是...

  • 集成与构建指南-概述

    作者  胡协刚 目    录1            概述... 52            术语说明... 53            角色与职责... 64            集成环境... 64.1      集成网络部署... 74.2      编译环境... 74.2.1       msvc6. 74.2.2       bcc55.

  • WebGL-Inspector.zip

    简要介绍：WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL ...

  • Flutter开发之诊断布局调试工具：inspector（12）

    一、工具启动入口 Android Studio工具启动入口，点击Android Studio窗口右侧的垂直按钮切换检查...inspector是用于可视化和浏览Flutter这些widget树的强大工具. 主要用来解决： 理解现有的布局 诊断布局问题 ...

  • Inspector Tool:适用于Google Chrome和Opera浏览器的Firebug Lite Beta-开源

    针对Web开发人员的工具，专用于基于Firebug Lite（测试版）的Chrome和Opera浏览器。 它是SourceForge上的免费开放源代码插件。 主要功能：-与Firebug相同的外观-实时检查HTML并修改样式-具有自动完成代码（tab，...

  • Android布局层次结构查看工具-Layout Inspector介绍

    0、前言，Google牛就牛在什么不好，干脆直接不要 hierarchy viewer：曾经的布局层级工具，说舍弃就舍弃掉 ...1、Layout Inspector就是最新的布局工具 入口：Tools - &amp;gt; Layout Inspector 2、 ...

  • Chrome辅助工具-Inspector -Console

    Console实际是浏览器的一个控制台，可以直接执行HTML和JavaScript等的一些指令 简单应用 定位登录窗口的位置 观察到Elements中显示有两个输入窗口 ...在Console中验证是否只有两个输入窗口 ......

Global site tag (gtag.js) - Google Analytics