各类浏览器调试工具使用详解
使用网站调试工具解决网站错误和问题
使用网站调试工具解决网站错误和问题在Web开发过程中，经常会遇到各种网站错误和问题。
这些问题可能导致网站无法正常运行，甚至影响用户体验。
为了解决这些问题，开发人员通常会使用网站调试工具。
网站调试工具是用于分析和调试网站错误的软件或服务。
本文将介绍一些常用的网站调试工具，并说明如何使用它们解决网站错误和问题。
一、浏览器的开发者工具现代浏览器（如Chrome、Firefox等）通常都内置了强大的开发者工具，其中包括用于调试网站的各种功能。
使用浏览器的开发者工具，可以实时查看和修改网站的HTML、CSS和JavaScript代码，检查网络请求和响应，以及模拟不同的设备和网络环境等。
1. 检查和修改网页元素浏览器的开发者工具允许我们查看网页的DOM结构，并对其中的元素进行修改。
如果网站的某个元素无法正常显示或者布局有问题，我们可以通过开发者工具找到对应的元素，并修改其样式或属性，以达到修复的目的。
2. 调试JavaScript代码在开发网站时，经常会使用JavaScript来实现交互和动态效果。
如果网站的JavaScript代码出现错误，可能会导致页面无响应或者功能异常。
通过浏览器的开发者工具，我们可以在"Console"选项卡中查看JavaScript的错误信息，并快速定位到错误的代码位置。
可以使用断点、单步调试等功能，逐行执行和分析代码，帮助我们解决JavaScript的问题。
3. 监控网络请求网站的性能和速度对用户体验至关重要。
浏览器的开发者工具中的"Network"选项卡可以帮助我们监控网站的网络请求和响应情况。
通过查看请求的时间、大小、状态码等信息，我们可以发现潜在的性能问题，并根据需要优化网站的加载速度。
二、在线网站调试工具除了浏览器的开发者工具之外，还有一些专门的在线网站调试工具，可以帮助我们定位和解决网站的错误和问题。
1. W3C验证工具W3C验证工具是由万维网联盟（World Wide Web Consortium）提供的一系列在线工具，用于检查网站是否符合HTML、CSS等标准。
网页调试与测试教程
网页调试与测试教程第一章：调试工具的选择与使用1.1 选择适合的调试工具在进行网页调试与测试之前，首先需要选择适合的调试工具。
常见的调试工具包括Chrome开发者工具、Firefox开发者工具、Safari开发者工具等。
这些工具提供了强大的功能，如页面元素查看、网络请求分析、JavaScript调试等，可以帮助开发者准确、高效地进行调试。
1.2 使用Chrome开发者工具调试网页Chrome开发者工具是广受欢迎的调试工具之一。
通过按下F12或右键点击网页并选择“检查”菜单，即可打开Chrome开发者工具。
在开发者工具中，可通过Elements、Console、Network等面板进行调试操作。
1.3 使用Firefox开发者工具调试网页Firefox开发者工具也提供了类似于Chrome开发者工具的调试功能。
通过按下F12或右键点击网页并选择“检查元素”菜单，即可打开Firefox开发者工具。
在开发者工具中，可通过Inspector、Console、Network等面板进行调试操作。
1.4 使用Safari开发者工具调试网页Safari开发者工具是Mac系统自带的调试工具。
通过在Safari浏览器中点击“首选项”菜单，选择“高级”选项卡中的“在菜单栏中显示开发菜单”选项，即可在菜单栏中显示开发菜单。
通过点击开发菜单中的“显示Web检查器”选项，即可打开Safari开发者工具。
在开发者工具中，可通过Elements、Console、Network等面板进行调试操作。
第二章：网页调试技巧与方法2.1 元素定位与查看调试网页时，常常需要定位并查看页面中的特定元素。
在Chrome开发者工具中，可通过选择Elements面板，使用鼠标在页面中选择元素，同时在Elements面板中即可看到该元素的HTML代码和CSS样式。
在Firefox开发者工具和Safari开发者工具中，也提供了类似的功能。
2.2 网络请求分析网页通常会发送多个网络请求，包括HTML文件、CSS文件、JavaScript文件、图片等。
谷歌浏览器(chrome)调试方法
chrome调试方法一.先来认识一下这些按钮的功能先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome 浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择可选择的适配3.Elements功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效，灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改对应的样式盒模型信息同时，当我们浏览网站看到某些特别炫酷的效果和难做的样式时候，打开这个功能，我们即可看到别人是如何实现的，学会它这知识就是你的了，仔细钻研也会有意想不到的收获4.Console控制台：用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个a: 一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便，即可用这个指令开查看，obj的json string 格式的key/value，我们对于数据里面有哪些字段和属性即可一目了然其他功能b: 除了console.log还有其他相关的指令可用console也有相关的API5.Sources js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，在我还没有走出校园时候，我经常看一些大站的js 代码，那时候其实基本都看不懂，但是最起码可以看看人家的代码风格，人家的命名方式，所有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式Sources Panel 的左侧分别是Sources 和Content scripts和Snippets对应的源代码格式化后的代码关于打断点调试的内容，下面介绍，先来说一些，其他平时基本没人用但是很有用的小点，比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码，所以推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息（新建了一个名叫：app.js的片段代码，在你的项目环境页面内，该片段可执行项目内的方法）自己书写的片段Content scripts 是Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这些文件也是嵌入在页面中的资源，这类文件可以读写和操作我们的资源，需要调试这些扩展文件，则可以在这个目录下打开相关文件调试，但是几乎我们的项目还没有相关的扩展文件，所以啥也看不到，平时也不需要关心这块无结果work网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看所有的资源以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息请求的相关信息打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据预览请求的数据7.Timeline标签页可以显示JS执行时间、页面元素渲染时间，不做过多介绍8.Profiles标签页可以查看CPU执行时间与内存占用，不做过多介绍9.Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除不做过多介绍10.Security标签页可以告诉你这个网站的安全性，查看有效的证书等11.Audits标签页可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告分析结果二.Sources资源页面的断点调试1.如何调试：调试js代码，肯定是我们常用的功能，那么如何打断点，找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点2.断点与js代码修改看下面这张图，我在一个名为toggleTab的方法下打了两个断点，当开始执行我们的点击切换tab行为后，代码会在执行的断点出停下来，并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息，同时我们可以使用右侧的功能键进行调试，右侧最上面一排分别是：暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。
如何使用网站调试工具(如Chrome开发者工具或Firebug)诊断和解决网站错误和问题的教程和技巧
如何使用网站调试工具（如Chrome开发者工具或Firebug）诊断和解决网站错误和问题的教程和技巧网站调试工具是开发者在开发和维护网站时的必备利器。
它们可以帮助我们诊断和解决各种网站错误和问题，从而确保网站的正常运行和良好的用户体验。
本文将介绍如何使用常见的网站调试工具（如Chrome开发者工具和Firebug），并分享一些调试网站错误和问题的实用技巧和经验。
通过学习本文，您将能够快速定位和解决网站错误和问题，提高网站的质量和性能。
一、Chrome开发者工具Chrome开发者工具是一款功能强大而又易于使用的网站调试工具。
它内置于Google Chrome浏览器中，并提供了一系列调试和监控网站的功能。
以下是使用Chrome开发者工具调试网站的步骤：1. 打开Chrome浏览器，并打开待调试的网站。
2. 右键点击网页中的任意位置，并选择“检查”。
或者按下键盘上的Ctrl + Shift + I（Windows）或Cmd + Option + I（Mac）快捷键。
3. 弹出的开发者工具窗口中，可以看到网站的HTML、CSS和JavaScript代码，以及网站的网络请求、性能等信息。
二、基本功能介绍1. 元素面板：可以查看和编辑网页的HTML和CSS代码。
通过选择某个HTML元素，我们可以在右侧的样式选项卡中调整该元素的样式属性，以实时预览效果。
2. 控制台面板：提供了一个交互式的JavaScript命令行环境，可以查看和调试JavaScript代码中的错误和警告信息。
我们可以在控制台中运行JavaScript代码，以检查和修改网页中的变量和对象。
3. 网络面板：用于监控和分析网页发起的网络请求。
我们可以查看每个请求的详细信息，如URL、请求方法、响应状态码等，以及请求和响应的内容。
通过网络面板，我们可以检查网页的加载性能，并优化网页的资源请求。
4. 资源面板：用于查看网页的所有资源文件，如图片、样式表、脚本文件等。
各种主流浏览器的调试(最终稿)
目录1.对IE浏览器的调试 (4)1.1. IE6,IE7浏览器对JS的调试方式 (4)1.1.1准备工作 (4)1.1.2调试脚本步骤 (5)1.1.3总结 (6)1.2.IE8浏览器对JS的调试方法 (6)1.2.1.准备工作 (6)1.2.2调试脚本步骤 (7)1.2.3总结 (10)2对火狐进行调试 (10)2.1安装Firebug (10)2.2、打开和关闭Firebug (11)2.3、查看、编辑HTML元素及其CSS (13)2.4、查看动态生成的HTML代码的方法 (16)2.5、查看/测试页面的函数执行效率 (16)2.6、使用Firebug查看XMLHttpRequest (17)2.7、查看页面上所有的CSS与JS (18)2.8、查看页面上所有的资源列表 (19)2.9、使用Firecookie调试页面cookie (20)3.Chrome浏览器对JS的调试方法 (20)3.1.准备工作 (20)3.1.1所涉及的版本 (20)3.1.2存在的问题 (20)3.2调试脚本步骤 (21)3.2.1实例所需代码（例子） (21)3.2.2调试的基本步骤 (22)3.3总结 (27)4对Safari进行调试 (27)4.1启用Safari的调试功能 (27)4.1.1 浏览器简介 (27)4.1.2 安装与使用 (27)4.2开启Debug菜单 (33)4.3 Debug菜单选项 (33)4.4查看当前页面的html结构 (34)4.5查看当前页面的资源 (34)4.6查看当前页面的脚本 (35)4.7查看运行时控制台信息 (36)4.8调试脚本 (36)5.Opera浏览器调试工具 (37)5.1.Dragonfly简介及其工作原理 (37)5.2调试方法 (38)5.2.1主要有两种调试方法： (38)5.2.2如何得到Dragonfly ？ (41)5.2.3如何启动Dragonfly (42)5.2.4用户界面概述 (44)5.3基本操作 (45)5.3.1脚本标签 (46)5.3.2调用栈面板 (49)5.3.3线程日志面板 (50)5.3.4检查面板 (50)5.3.5命令行 (51)5.3.6DOM 标签 (52)5.3.7 网页样式表标签 (54)5.3.8样式标签 (55)5.3.9 DOM 属性标签 (57)5.3.10 布局标签 (59)5.3.11 错误控制台标签 (59)1.对IE浏览器的调试1.1. IE6,IE7浏览器对JS的调试方式1.1.1准备工作1.1.1.1下载install-companionjs-v0.5.3首先下载install-companionjs-v0.5.3.rar，然后按照默认路径安装。
浏览器开发者工具用法
浏览器开发者工具用法浏览器开发者工具是为开发人员提供的一种强大的工具，用于调试和分析网页。
它可以帮助开发人员查看网页的结构、样式、性能以及与后端服务器的通信等信息。
以下是一些常用的浏览器开发者工具用法：1. 查看网页结构：打开开发者工具的"Elements"（元素）面板，可以查看网页的HTML 结构。
可以单击元素来查看和编辑其相关的CSS属性。
还可以通过点击元素旁边的小三角形来展开和折叠子元素。
2. 调试JavaScript代码：在开发者工具的"Sources"（源码）面板中，可以查看和编辑网页的JavaScript代码。
可以设置断点，观察变量的值，逐步执行代码，以及检查错误和异常信息。
3. 调试网络请求：在"Network"（网络）面板中，可以查看所有的网络请求和响应。
可以查看请求的方法、URL、头部信息和响应状态等。
还可以查看请求和响应的详细内容，包括请求和响应的数据、头部和Cookie等信息。
4. 分析网页性能：在"Performance"（性能）面板中，可以记录和分析网页的性能。
可以查看网页加载过程中每个阶段的耗时，并分析性能瓶颈和优化机会。
还可以录制流程，分析资源的加载顺序和依赖关系，以便优化页面加载速度。
5. 诊断网页布局问题：在"Elements"（元素）面板中，可以使用"Layout"选项来查看网页元素的盒模型（box model）。
可以查看元素的尺寸、位置和边距等信息。
还可以使用"Inspect"工具来直观地查看网页布局，并调整元素的大小和位置。
6. 模拟设备：在开发者工具的"Device"（设备）面板中，可以模拟不同的设备和屏幕尺寸。
可以查看网页在不同设备上的显示效果，并进行响应式设计和优化。
7. 监控资源和事件：在"Performance"（性能）面板中，可以使用"Memory"（内存）选项来监控网页的内存使用情况。
学会使用电脑的调试工具
学会使用电脑的调试工具在当今信息化时代，电脑已经成为我们生活和工作中必不可少的工具。
然而，由于软硬件的繁杂性，我们在使用电脑过程中常常会遇到各种问题和bug。
为了解决这些问题，学会使用电脑的调试工具将成为我们提高工作效率的关键。
本文将介绍几种常用的电脑调试工具和它们的使用方法。
一、任务管理器任务管理器是Windows系统自带的一款常用调试工具，在遇到电脑卡顿或程序无响应的情况下，它可以帮助我们找到问题的症结。
使用任务管理器，我们可以查看系统资源的使用情况，关闭卡死的进程，或开启新的任务，从而恢复电脑的正常运行。
在Windows系统中，按下Ctrl+Shift+Esc快捷键可以直接打开任务管理器。
在任务管理器的“进程”选项卡中，我们可以看到当前正在运行的所有进程及其所占用的资源。
通过观察CPU、内存和磁盘使用率，我们可以找到系统中占用大量资源的进程，并对其进行优化或关闭。
二、代码编辑器调试工具对于从事软件开发的人员来说，代码编辑器的调试工具是必不可少的。
常见的代码编辑器如Visual Studio Code、PyCharm等都提供了强大的调试功能，帮助开发者查找问题和解决bug。
以Visual Studio Code为例，它内置了调试功能，可以在代码中设置断点，逐行调试程序。
当程序运行到断点处时，我们可以查看变量的值，进行单步调试，或者观察函数的调用栈，从而分析问题所在。
此外，Visual Studio Code还支持对应用程序的远程调试，方便我们在客户端出现问题时进行调试和排查故障。
三、网络调试工具在进行网络开发或者维护时，网络调试工具是不可或缺的帮手。
常见的网络调试工具有Wireshark、Postman等。
Wireshark是一款网络抓包工具，通过监听网络接口，它可以捕获和分析网络数据包，在网络故障排查和网络优化中发挥着重要作用。
我们可以在Wireshark中查看网络通信的详细信息，包括请求方法、响应状态码、请求头、响应体等，从而找到网络中的问题所在。
IE的分析方法及工具
IE的分析方法及工具概述Internet Explorer（IE）是一款常见的网络浏览器，广泛应用于Windows操作系统。
为深入了解IE的性能和行为，开发者和分析师需要运用一些特定工具和方法来进行IE的分析。
本文将介绍一些常用的IE分析方法和工具，帮助读者更好地了解IE的性能和调试过程。
1. 内置工具1.1 Internet Explorer F12开发者工具Internet Explorer F12开发者工具是IE浏览器内置的一项功能强大的调试工具。
通过按下F12键或在菜单栏中选择“开发者工具”，开发者可以打开该工具。
F12开发者工具内部有多个选项卡，每个选项卡提供不同的调试和分析功能。
以下是几个常用的选项卡：•元素（Elements）：用于查看和编辑当前网页的HTML结构。
•控制台（Console）：显示JS脚本的运行日志和错误信息。
•网络（Network）：跟踪和分析页面加载过程中的网络请求和响应。
•性能（Performance）：用于分析页面的性能指标，如加载时间、CPU和内存使用情况等。
1.2 Windows事件查看器Windows事件查看器是Windows操作系统的一个内置工具，可用于查看和分析系统事件日志。
对于IE的分析来说，事件查看器是一个有用的资源。
通过事件查看器，用户可以查看IE启动、崩溃和其他相关事件的日志。
这些日志可以帮助分析师快速定位问题和调试IE的故障。
2. 第三方工具2.1 FiddlerFiddler是一款流行的网络调试工具，用于捕获和分析HTTP网络流量。
它可以在Windows和Mac上运行，并提供了丰富的功能，包括网络流量截获、修改请求和响应、模拟网络问题等。
Fiddler对于IE的分析非常有用，特别是在调试前端与后端交互时。
通过Fiddler，用户可以查看和分析IE浏览器与服务器之间的请求和响应，从而定位网络问题和性能瓶颈。
2.2 Process ExplorerProcess Explorer是一款Windows系统进程查看工具，由Microsoft官方提供。
trace 用法 chrom
trace 用法chrom[trace 用法chrom]在计算机科学领域，trace（追踪）是一种用于调试程序的技术。
它可以记录程序的执行过程和变量的数值，以帮助开发人员诊断和修复程序错误。
Trace也被广泛应用于性能分析和优化领域，以帮助开发人员理解和改进程序的执行性能。
在本文中，我们将详细介绍Trace在Chrome浏览器中的用法，并探讨如何使用Trace来分析和优化web应用程序的性能。
第一部分：Chrome浏览器中的Trace 工具1.1 Trace 工具的概述首先，我们将对Chrome浏览器中的Trace工具进行概览。
Trace工具是Chrome开发者工具的一部分，它可以捕捉和展示程序的执行轨迹和性能数据。
通过使用Trace工具，开发人员可以深入了解代码执行过程中出现的性能瓶颈，以及如何优化代码以改进性能。
1.2 Trace 工具的开启和配置在使用Trace工具之前，我们需要打开Chrome浏览器的开发者工具。
然后，在开发者工具的顶部导航栏中找到"Performance"（性能）选项卡，并点击它。
在性能选项卡中，可以看到Trace工具的相关选项和配置。
1.3 开始一个Trace Session在Trace工具中，通常会使用两种方式开始一个Trace会话。
第一种方式是通过点击工具栏上的记录按钮来手动开始和停止Trace。
另一种方式是通过命令行接口（CLI）来自动开始和停止Trace。
1.4 配置并运行Trace在开始Trace会话之前，我们可以配置Trace工具以捕获特定的性能数据。
例如，可以选择捕获特定的事件、采样频率、页面加载时间等。
配置完毕后，我们可以点击记录按钮开始Trace会话。
在会话过程中，我们可以进行一系列操作，例如打开和关闭页面、执行操作等。
1.5 停止Trace 并分析结果当我们认为Trace会话已经足够长或者已经捕获到了感兴趣的性能数据后，可以点击停止按钮来停止Trace。
f12的请求参数
f12的请求参数F12是开发者工具的一部分，是现代浏览器中常用的调试工具。
通过F12开发者工具，开发人员可以查看和修改网页的HTML、CSS和JavaScript代码，以便调试和优化网站。
请求参数是在HTTP请求中传递给服务器的信息。
它们可以包含各种数据，例如表单输入、查询字符串和路径参数等。
在使用F12开发者工具时，我们可以轻松地查看和分析这些请求参数，以便理解网页和服务器之间的数据传递过程。
一、F12的使用方法在大多数主流浏览器中，按下F12键或右键点击页面并选择“检查”选项，即可打开开发者工具。
在开发者工具中，我们可以看到多个选项卡，如“元素”、“网络”、“控制台”等。
针对请求参数的分析，我们主要关注“网络”选项卡。
二、查看请求参数1. 打开开发者工具后，在浏览器中访问一个网页。
2. 点击“网络”选项卡，可以看到所有与该网页相关的请求和响应信息。
3. 在请求列表中选择一个请求，点击它以查看详细信息。
4. 在右侧的面板上，我们可以看到该请求的各种信息，如Request Headers（请求头部）、Query String Parameters（查询字符串参数）和Form Data（表单数据）等。
三、分析请求参数1. Request Headers：它包含了浏览器发送给服务器的HTTP请求头信息。
这些头部信息中可能包含一些有关请求参数的内容，例如Content-Type、Referer等。
2. Query String Parameters：它由问号后面的一段字符串组成，用于在URL中传递参数。
如果网址中有参数，则可以在这里找到它们的键值对。
3. Form Data：如果请求是通过表单提交的，相关的参数信息将显示在这里。
四、修改请求参数在开发者工具中，我们还可以修改请求参数，以便调试和优化网页。
这对于测试不同设置和验证响应是否正确非常有用。
1. 在“网络”选项卡中选择一个请求。
2. 在右侧的面板上，找到请求参数的部分。
各类浏览器调试工具使用详解
各类浏览器调试工具使用详解浏览器调试工具是开发者在开发过程中必备的工具之一，它可以帮助我们快速定位和解决网页中的问题。
不同的浏览器提供了不同的调试工具，下面将对常用的几种浏览器调试工具进行详细介绍。
1. Chrome DevTools (Chrome开发者工具)Chrome DevTools是Google Chrome浏览器自带的一套调试工具，通过按下F12或右键点击网页选择“检查”即可打开。
它提供了丰富的功能，包括元素查看、控制台、网络、源代码等。
- 控制台：用于查看和调试JavaScript代码，可以输出日志、执行命令、查看变量值等。
-网络：用于分析网络请求，可以查看请求和响应的头部、状态码、内容等信息。
- 源代码：可以在DevTools中直接修改和调试页面的源代码，还可以设置断点进行代码调试。
2. Firefox Developer Tools (Firefox开发者工具)Firefox Developer Tools是Mozilla Firefox浏览器内置的调试工具，通过按下F12或右键点击网页选择“检查元素”打开。
它提供了类似Chrome DevTools的功能，包括元素查看、控制台、网络、存储等。
-元素查看：可以查看和修改元素样式、布局、事件监听等。
- 控制台：用于调试JavaScript代码，可以输出日志、查看变量值、执行命令等。
-网络：可以查看和分析网络请求，包括请求和响应的头部、状态码、内容等。
- 存储：可以查看和修改网页的Cookie、本地存储、IndexedDB等。
3. Safari Web Inspector (Safari网络检查器)Safari Web Inspector是Safari浏览器自带的调试工具，通过菜单栏中的“开发”选项中选择“显示Web检查器”可以打开。
与Chrome DevTools和Firefox Developer Tools类似，它也提供了元素查看、控制台、网络、资源等功能。
学习使用浏览器开发者工具进行调试和性能分析
学习使用浏览器开发者工具进行调试和性能分析浏览器开发者工具是一组内置于现代浏览器中的工具，旨在帮助开发人员调试和优化网页。
使用浏览器开发者工具，开发人员可以通过检查和修改网页的HTML、CSS和JavaScript来查找和解决问题。
同时，浏览器开发者工具还提供了性能分析功能，可以帮助开发人员优化网页加载速度和性能。
本文将详细介绍如何使用浏览器开发者工具进行调试和性能分析，主要包括以下几个方面的内容：1. 开启浏览器开发者工具：不同浏览器的开发者工具打开方式不尽相同，可以通过快捷键、菜单栏或右键菜单来打开。
常见的浏览器开发者工具有Chrome DevTools、Mozilla Firefox的开发者工具、Microsoft Edge的开发者工具等。
2. 检查网页元素：在浏览器开发者工具的“Elements”（或类似名称）标签中，可以查看网页的DOM结构，并对元素进行检查和修改。
开发人员可以通过查看和修改HTML标签、属性和样式来调试和优化网页。
3. 控制台调试：浏览器开发者工具提供了JavaScript控制台，可以在其中执行和调试JavaScript代码。
开发人员可以在控制台中输出日志信息、调用JavaScript 函数，甚至可以在运行中的网页上进行实时的代码修改和测试。
4. 网络调试：浏览器开发者工具还提供了网络调试功能，可以查看网页的网络请求和响应。
开发人员可以查看请求的详细信息、请求头和响应内容，还可以模拟不同的网络环境和速度来测试网页的性能。
5. 性能分析：浏览器开发者工具的性能分析功能可以帮助开发人员找到网页加载过程中的性能瓶颈和优化点。
通过对网络请求、DOM构建、JavaScript执行和渲染等方面的分析，开发人员可以了解网页加载的耗时和资源占用情况，并针对性地进行优化。
6. 编辑器集成：一些浏览器开发者工具还可以与编辑器集成，提供更加高效的开发体验。
开发人员可以在编辑器中直接编辑网页代码，并通过浏览器开发者工具实时预览效果，从而更方便地进行调试和开发。
f12开发工具使用方法
f12开发工具使用方法
F12开发工具是一种常用的网页开发工具，它可以帮助开发人员查看网页的源代码、调试代码、查看网络请求等等。
以下是使用F12开发工具的一些常见方法：
1. 打开F12开发工具：按下F12键即可打开F12开发工具，或者在浏览器中右键点击页面，选择“检查元素”也可以打开F12开发工具。
2. 查看网页源代码：在F12开发工具中，选择“Sources”标签，即可查看网页的源代码。
3. 调试代码：在F12开发工具中，选择“Debugger”标签，即可在代码执行过程中进行断点调试。
4. 查看网络请求：在F12开发工具中，选择“Network”标签，即可查看网页加载过程中发出的所有网络请求。
5. 修改网页元素：在F12开发工具中，选择“Elements”标签，即可查看和修改网页的HTML元素。
6. 查看元素样式：在F12开发工具中，选择“Elements”标签，并选中一个元素，即可查看该元素的CSS样式。
7. 修改元素样式：在F12开发工具中，选择“Elements”标签，并选中一个元素，在右侧的“Styles”窗口中修改CSS样式，即可实时查看修改后的效果。
8. 查看事件监听器：在F12开发工具中，选择“Elements”标签，并选中一个元素，然后点击右键选择“Event Listeners”，即可查看该元素上注册的事件监听器。
以上是使用F12开发工具的一些常见方法，当然还有许多高级用法等待您去探索。
如何通过调试工具解决代码兼容性问题
如何通过调试工具解决代码兼容性问题代码兼容性问题是在不同的浏览器、操作系统或设备上运行代码时出现的问题。
这些问题可能导致页面布局错误、功能失效、性能问题等。
为了解决这些问题，开发者可以使用调试工具来识别和修复代码兼容性问题。
下面是一些常用的调试工具和解决代码兼容性问题的方法。
1.开发者工具主流浏览器如Chrome、Firefox和Safari都提供了开发者工具，在开发者工具中有一些强大的功能来帮助调试代码兼容性问题。
-元素和样式检查：开发者工具允许您检查页面上的元素和应用的样式。
通过这些工具，您可以查看特定元素的盒模型、计算样式、应用的CSS规则等。
这有助于发现页面布局错误和样式问题，并进行相应的修复。
- JavaScript调试：开发者工具还提供了JavaScript调试功能，可以帮助您找到JavaScript代码中的错误和异常。
您可以在代码中设置断点、监视变量和表达式的值，以及逐步执行代码，以便更好地理解代码的执行过程和定位问题。
-网络监控：在开发者工具的网络面板中，可以查看网页请求和响应的详细信息。
这对于检查网络资源加载的问题很有帮助，如资源丢失、加载时间过长等。
2.跨浏览器调试工具虽然主流浏览器的开发者工具非常强大，但有时候我们也需要测试和调试在其他浏览器中运行的代码。
以下是一些流行的跨浏览器调试工具。
- BrowserStack：BrowserStack是一款云端跨浏览器测试工具，它允许您在不同的操作系统和浏览器上进行测试和调试。
通过BrowserStack，您可以模拟移动设备、不同版本的浏览器，并查看您的网页在这些环境中的表现效果。
- CrossBrowserTesting：CrossBrowserTesting也是一款类似的云端测试工具，它提供了一个简单易用的界面来在不同的浏览器和设备上进行测试和调试。
您可以直接在CrossBrowserTesting的界面中查看您的网页，检查页面布局、功能和性能等问题。
前端开发的调试工具
前端开发的调试工具前言随着计算机技术的不断发展，Web前端开发已经成为了越来越重要的一部分。
但是，由于各种因素的影响，前端代码不可避免地会出现各种各样的问题。
为此，前端开发人员需要使用一些调试工具，以提高代码的质量和效率。
因此，本篇论文将介绍前端开发中常用的调试工具及其作用。
一、Chrome DevToolsChrome DevTools是一款集成在Google Chrome浏览器中的调试工具。
它提供了一系列有用的功能，例如审查元素、调试JavaScript代码、分析网页性能等等。
使用Chrome DevTools，开发人员可以轻松地查看和编辑网页上的HTML元素，调试JavaScript代码，以及分析网络请求，以消除由于bug导致的性能问题。
此外，还可以使用Chrome DevTools来检查页面的响应式设计以及性能优化。
二、FirebugFirebug是一款开源的前端调试工具，集成在Firefox浏览器中。
它的功能与Chrome DevTools类似，用于审查元素、调试JavaScript代码、分析网页性能等等。
使用Firebug，开发人员可以方便地检查并编辑网页的HTML、CSS和JavaScript代码，也可以在运行时调试JavaScript代码。
此外，还可以通过Firebug的网络面板查看网络请求、了解响应时间和速度，以及优化性能。
三、Safari Web InspectorSafari Web Inspector是Mac OS X中自带的一款Web开发调试工具。
它与Chrome DevTools和Firebug类似，提供了一系列的开发和调试功能，包括审查元素、调试JavaScript代码、分析网页性能等等。
使用Safari Web Inspector，开发人员可以轻松查看和编辑网页上的元素、调试JavaScript代码和通过分析网络请求来解决性能问题。
此外，Web Inspector还包括一个资源面板，允许开发人员查看和管理网页中的资源，例如CSS、JavaScript和图像文件。
如何使用浏览器的F12调试页面
如何使用浏览器的F12调试页面
一、背景介绍
一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。
二、知识剖析
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
注：部分电脑打开F12是需要组合键：Fn+F12；例如：Mac，ThinkPad等
三、常见问题
F12调试CSS样式的主要功能有哪些？
四、解决方案
1、如何更改调试窗口的显示位置
按下F12进入调试
2、如何选中需要修改的元素，如何进行手机端调试
3、如何更直观的观察到页面中设置的盒子模型
4、如何修改当前元素的样式
1、直接在当前元素上添加样式
2、在当前元素对应的class上修改样式
5、如何修改元素设置的伪类属性
6、如何添加新的class、复制和删除原来的class
7、如何快速增加元素样式
谷歌浏览器自带了4个快速增加属性的按钮：text-shadow、box-shadow、color、background-color
五、编码实战
六、拓展思考
如何通过F12开发者工具来学习优秀网站的设计。
devtools使用总结
devtools使用总结简介devtools（开发者工具）是一款强大的浏览器调试工具，通常用于Web开发人员进行网页调试和性能优化。
在这篇文档中，我们将总结devtools的使用方法和常见功能，以帮助开发人员更好地利用这个工具。
安装和启动devtools是现代浏览器的内置工具，可通过浏览器的开发者模式访问。
以下是常见浏览器的启动devtools的方法：•谷歌浏览器：点击菜单栏的三个点，选择“更多工具” -> “开发者工具”，或者按下快捷键Ctrl+Shift+I。
•火狐浏览器：点击菜单栏的三个横线，选择“开发者” -> “Web开发者工具”，或者按下快捷键Ctrl+Shift+I。
•Safari浏览器：点击菜单栏的“偏好设置” -> “高级” -> “在菜单栏中显示“开发”菜单”。
•Microsoft Edge浏览器：点击菜单栏的三个点，选择“更多工具” -> “开发人员工具”，或者按下快捷键Ctrl+Shift+I。
基本功能1. 元素面板（Elements）元素面板是一个直观的DOM树形结构，可查看和编辑网页的HTML和CSS。
开发人员可以通过单击元素来查看和修改其样式和属性。
此外，还可以在元素面板中添加或删除元素，以实现对网页结构的调整。
2. 控制台面板（Console）控制台面板提供一个JavaScript命令行界面，开发人员可以在这里输入和执行JavaScript代码。
同时，控制台面板还会显示网页中的错误和警告信息，帮助开发人员进行debug。
3. 网络面板（Network）网络面板用于监视网页的网络请求，包括HTTP请求和响应。
开发人员可以查看每个请求的详细信息，如请求头、响应时间和请求大小。
此外，网络面板还提供了筛选功能，用于筛选特定的请求类型或域名。
4. 资源面板（Resources）资源面板允许开发人员查看和修改网页加载的各种资源，如脚本、样式表、图片和字体等。
devtools 用法
devtools 用法
DevTools是一种开发者工具集，可以帮助开发人员在浏览器中进行调试、分析和优化网页。
以下是一些常见的DevTools用法及其功能描述：
1. 元素查看器（Elements）：DevTools的一个核心功能，允许开发人员查看和修改网页的HTML和CSS代码。
通过元素查看器，可以快速定位到特定的DOM 元素，并实时编辑其样式和属性。
2. 控制台（Console）：控制台是一个交互式窗口，可以用于执行JavaScript代码，并查看代码输出、错误和警告。
开发人员可以在控制台中进行调试、输出日志信息以及检查网络请求和响应。
3. 网络面板（Network）：网络面板允许开发人员监控网页在加载过程中发出的所有网络请求和响应。
通过网络面板，可以查看请求和响应的详细信息（如请求方法、状态码、HTTP头等），并分析网页的性能优化和资源加载情况。
4. 性能分析器（Performance）：性能分析器可以帮助开发人员评估网页的性能表现，并找出潜在的性能瓶颈。
它提供了多种性能分析工具，如生成性能时间轴、检测内存泄漏、分析JavaScript执行时间等。
5. 应用程序面板（Application）：应用程序面板提供了管理网页缓存、存储数据和查看网页存储空间的功能。
开发人员可以通过应用程序面板查看和管理网页的Cookie、LocalStorage、IndexedDB等。
这些只是DevTools提供的一小部分功能，开发人员可以根据具体需求利用这些工具进行更深入的调试和优化。
通过熟练掌握DevTools的使用，开发人员可以提高开发效率、精确调试代码，并优化网页的性能和用户体验。
怎么在浏览器中打开调试工具
怎么在浏览器中打开调试工具
不少浏览器都有调试网页的功能，比如谷歌、ie、360等，那么怎么在浏览器中打开调试工具呢?下面店铺整理了在浏览器中打开调试工具的解决方法，供你参考。
在浏览器中打开调试工具的解决方法
打开浏览器后，按键盘的F12应该是比较通用的，这几种浏览器都能打开调试工具。
比如在360浏览器中，按下F12就会弹出调试工具
在360浏览器中要注意浏览器的模式，当前是兼容模式，所以调试工具如下图所示
如果360浏览器切换到急速模式，按F12弹出的调试工具就不一样了
如果不用快捷键，也可以在菜单中打开调试工具，方法是点击“工具”，在菜单下点击“开发人员工具”就可以了
在谷歌浏览器中，按键盘上的F12键也是可以调出调试工具的，如下图所示
通过地址栏右边的按钮也可以调出调试工具：在菜单中点击“更多工具”，在子菜单中点击“开发者工具”就可以了~
在ie11中，按下键盘的F12键像前两个浏览器那样调出调试工具，如下图所示
或者点击“工具”，在菜单中选择“F12开发人员工具”来调出调试工具~
你可能会喜欢的：。
Android手机浏览器调试使用Chrome进行调试实例详解
Android⼿机浏览器调试使⽤Chrome进⾏调试实例详解使⽤PC上的 Chrome 远程调试⼿机端的页⾯
⼯具准备
⼿机端：chrome for Android,；
PC端：安装⾕歌浏览器(最好是最新版的开发者版本)
USB 连接线, 也就是你充电器的那条线
开启调试模式
使⽤ USB 连接你的电脑，并开启调试模式。
使⽤ Android 4.2 或以上的⼿机可能没有调试模式选项，可以找到 “设置 > 关于⼿机 > 版本号(Build Number)”, 点 7 次，然后返回开发者选项就可以了。
查找 USB 设备（Enable USB discovery in Chrome）
在你的桌⾯版的 chrome ，打开菜单 > ⼯具 > 检查设备。
勾选Discover USB devices。
稍等⽚刻，你的⼿机会提⽰你是否允许调试，接受调试即可。
接受调试后，可能需要等⼀下 chrome 才能检测到你的⼿机。
如果没有检测到，可以试⼀下重启浏览器。
调试
检测到你的⼿机后，点击 inspect，弹出开发者⼯具，这样你就可以像调试桌⾯页⾯那样调试⼿机页⾯。
chrome 远程调试
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript调试技巧之：快速定位Posted in 2009/07/24 ¬ 00:48h.yongbin1 Comment »赶紧总结一下JavaScript的调试技巧，这次首先是“快速定位”篇。
快速定位，其实就是快速定位程序的错误，所以也算是调试。
这个在实际的码代码时往往比较实用。
大多数情况下，你的js代码不多（少于1000行），只要能迅速发现代码的错误，往往不用复杂的调试。
关于常用的快速定位方法，我总结了一下几点，欢迎大家补充。
1. 使用alertalert其实比较实用。
本地调试中，在合适的位置写alert，打出来一些变量，虽然比较土，但是往往事半功倍！另外有一个alert技巧，想看看一个对象中的属性和它的值吗，试试这个：2. 使用地址栏使用地址栏，输入javascript: doSomething()，可以在Runtime时输出或者执行一些代码。
输出东西时也使用alert，例如在地址栏输入：可以输入当前的document下的链接数量。
如果想执行已经加载的自定义函数，可以输入例如：3. 错误查看器最快捷的错误查看器当属Firefox的错误控制台，快捷键ctrl+shift+j。
在你觉得脚本执行不正常时，首先按一下这个快捷键，往往能立刻知道哪里出了问题，并且点一下就能到问题脚本所在的位置，非常方便，强烈推荐！4. 用浏览器的扩展或插件查看错误这个话题比较大，一时说不完，所以先说说用扩展或插件来查看错误。
对我来讲，Firebug 一般就够用了，比较常见，就不截图了。
启用Firebug控制台后，如果页面上js脚本错误，就会立刻在右下角显示出来，点击可以查看错误。
有一点需注意，我的Firebug有时会报这个带乱码的错误：我一直不清楚这个为什么会乱码，但我知道这个是跨域的错误，比较常见。
其他浏览器的错误查看器，在这里我也简单总结一下：Chrome错误控制台IE8错误查看器Opera错误控制台Chrome：菜单–开发人员– JavaScript控制台，下方可以看到类似于Firebug的console，在这里可以看到错误和警告信息。
Opera：菜单–工具–高级– Error Console，功能比较强大，可以查看各类错误。
Safari：4.0版跟Chrome查看方式一样。
Chrome/Opera/Safari都可以在Develope Tools 里看到错误信息。
IE8：非常不好用，但是也有。
开发人员工具– Script标签–点击右边的console。
在这个console里可以看到错误信息，但是不太友好。
5. console.log在代码中使用console.log，也就是类似于alert，只不过把想要的信息输出到console里。
console对象在Firefox、Chrome、Safari里都可以使用。
除了console.log，还有console.error，等等。
详见Firebug的console API。
6. Console最后正式介绍一下Console，也就是控制台。
Life is short, use console！以Firebug的console 为例，把几个常用功能介绍总结一下：∙查看js对象输入一个名字，例如window，window对象就会出现在结果中。
这时可以点击这个window 对象！点击以后就可以在DOM标签中查看这个对象的所有属性。
那么现在应该能看到window下的全局变量了，方便吧！∙查看DOM对象输入document.getElementById(“el_id”)，这时el_id这个元素就会出现在结果中，点击可以看到它的详情，例如看看它当时的HTML代码。
∙在Runtime执行脚本输入任何的js代码，立刻执行。
这样可以很方便地测试页面上的脚本了。
也可以在多行模式中执行输入的js。
关于这个console，在输入js脚本时，别忘了按tab键进行代码自动补齐哦！代码补齐和提示功能，在Chrome、Safari和Opera里同样有效，IE8就惨点了。
Chrome和Safari做的也非常好，大家可以试一下啊。
简而言之，掌握快速定位，可以迅速解决JavaScript开发中的琐碎问题，以上办法中，我的建议是，遇到问题先用错误查看器看一下，不行再使用Console，基本上就能很快定位问题原因了！Firefox, JavaScriptChrome, Debug, Firebug, Firefox, IE8, JavaScript, Opera, Safari, 调试You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.1 Comment »JavaScript调试技巧之：断点调试(1) | Thinking for Fun says:2009/08/04 at 00:26[...] 如果您还没有阅读《JavaScript调试技巧之：快速定位》，建议先看看那篇。
说不定，用快速定位就能解决问题了，呵呵。
这次我会总结记录一下断点调试的笔记，希望也对大家有用，欢迎补充交流！[...]Leave a Replyjavascript脚本调试方法小结相信大家试过编写javascript脚本时发生这样或那样的错误，但是js并没有很好的调试方法，在这里介绍两个方法。
1、alert方法这也是十分原始的方法，但调试起来十分麻烦。
2、debugger方法首先打开Internet选项——高级，将“禁用脚本调试（Internet Explorer）”的勾去掉如果想其他浏览器也启用调试，那么可以把“禁用脚本调试（其他）”的勾也去去掉。
然后在你想需要地方进行调试，就加入debugger，如<script type="text/javascript">debugger;var s="debugger可调试";alert(s);</script>用ie打开该页面，就会出现自动调用VS2005进行调试.点击是，像平时一样按F10或F11就可以进行调试了关键词：javascript脚本调试方法JavaScript调试技巧之：断点调试(1)Posted in 2009/08/04 ¬ 00:26h.yongbin2 Comments »如果您还没有阅读《JavaScript调试技巧之：快速定位》，建议先看看那篇。
说不定，用快速定位就能解决问题了，呵呵。
这次我会总结记录一下断点调试的笔记，希望也对大家有用，欢迎补充交流！首先，在各个浏览器中，断点调试支持的最好的当然是Firefox，Firefox不仅可以使用Firebug调试页面js脚本，还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。
除此之外，Firefox还支持一些更为高级的断点调试、变量监视功能。
其他浏览器里，Opera、Chrome和Safari的调试功能也比较好用。
Opera的DragonFly速度相对比较快，界面清爽，功能强大，但不如Safari等友好。
相比来说，IE8的程序员工具简直没法用。
这次时间有限，先来总结一下Firefox下的调试技巧。
1. 使用Firebug进行断点调试使用Firebug调试JavaScript非常方便。
具体步骤：a. 打开Firebug后，启用“脚本”调试，找到引用的脚本文件（或者行内js）；用Firebug找到要调试的脚本（点击放大）b. 在适当的位置加入断点；c. 如果断点已经执行过，则刷新页面，这时脚本就会在断点处中断。
如果断点没有执行过，那可以直接执行页面上的动作（例如点击按钮等），然后代码会在断点处中断；用Firebug进行断点调试（点击放大）d. 观察函数调用栈，观察local变量，也可以进行单步执行，进行调试。
确实非常简单！用Firebug断点调试的优点总结如下：∙能加断点的行用绿色行号，非常直观；∙call stack用两种方式显示出来，很方便；∙本地变量的显示非常清晰明了。
2. 使用JavaScript Debugger进行断点调试这是老牌的调试工具，之前叫做Venkman，可以以扩展形式安装在Firefox上，我们在这里就称他为Venkman吧。
它不仅能够调试页面脚本，还能调试Firefox扩展（extension）里的js。
我们在做Firefox扩展开发时，Venkman是必不可少的工具，老田强力推荐！当然，Firefox本身的逻辑实现，也是用JavaScript来做到的。
我们现在可以用Venkman来调试一下Firefox本身。
Firefox的核心js是browser.js，在这个路径下：chrome://browser/content/browser.js我们打开Venkman之后，在Loaded Scripts里填入browser.js，这个js文件就会被过滤出来（如果没有看到browser.js，那么你可能需要查一下是否选上了Debug->Exclude browser files）。
Venkman：选择要调试的js文件（点击放大）我们找到让浏览器后退的代码，然后点击Firefox的后退按钮，这时Venkman就会停在BrowserBack方法上！让我们再一步一步地看一看，Firefox自己到底做了什么。
btw，实现Firefox的js代码也不是很漂亮嘛~~~用JavaScript Debugger断点调试Firefox（点击放大）Venkman当然也带有一个console，利用这个console，我们可以看一看浏览器层次的window和document都是什么东西。
类似于Firebug和其他浏览器的console，只要直接输入js代码片段即可！使用Venkman自带的console（点击放大）有兴趣的话，可以在这里发现更多有关Firefox开发（以及扩展开发）的好玩的东西！3. 使用debugger在程序中加入断点另外还有一个少为人知的断点加入方法。
我们可以在程序中加入debugger语句，这样Firefox的调试工具会停留在这条语句上，代码也暂停执行，和加入断点的效果一样。
例如：这时重新加载页面，断点就会停留在debugger语句上。
这样，我们就可以在写代码时随心所欲地加入断点了。
另外，其他浏览器（包括IE8！Surprise！）同样支持debugger语句！JavaScriptBrowser, Debug, Firebug, Firefox, JavaScript, 调试You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.2 Comments »∙JavaScript调试技巧之：断点调试(2) | Thinking for Fun says:2009/08/04 at 14:31[...] 上次总结了Firefox下进行JavaScript断点调试的技巧，这次来看一下其他浏览器下的调试。