大家好,今天再为大家奉献一篇入门教学,这次是关于浏览器调试的。
无论你是在学习,还是做项目,熟练地掌握浏览器的调试功能,都将会有很大的帮助。调试能够帮助你快速地了解框架,处理bug,让你不论处理什么都能够更快速,更准确。
在这篇文章里,我将详细地为大家介绍chrome浏览器中常用的调试功能,对于其他的浏览器,大家同样可以触类旁通。接下来->打开chrome->按F12。开始chorome调试之旅吧!
一、JS调试
选中Script标签之后,我们来到了JS调试界面。
为大家讲解一下各个区域的作用。
左上角有一个下拉框,用于选择JS文件,还有后退以及前进按钮,可以快速地返回之前调试的JS文件。
左侧的代码窗口,用处自然不必多说。在行数的地方点击鼠标可以设置断点。程序运行到断点处时,可以鼠标在代码上悬停,以查看变量、表达式的值。
右上角的几个小按钮,用于控制程序的执行(当然,要设置断点以后才有用。)功能分别为执行至下一个断点(F8)、执行至下一个函数调用结束(F10)、执行至下一个函数内部(F11)、跳出当前函数(Shift+F11)、禁用所有断点。
右侧的第一个区域,用于观察变量。点击‘+’添加你要观察的变量或者表达式,这样的话,无论程序运行到哪里,你都能够监视一些重要的值。
右侧的第二个区域是函数的调用堆栈。在这里,我们可以看到函数的嵌套调用结构,点击可以快速转到函数的所在位置。
右侧第三个区域,同样是用于观察变量的。这里分为Local和Global两个。Local里,可以看到所有的当前作用域内的变量。而Global基本可以看到所有全局变量。
右侧第四个区域,断点管理。
按Esc键快速调出下面的的控制台,在这里可以看到程序的各种输出,。包括log、警告、异常。如果我们在代码里面写了console.log(o);语句,则o会在这里作为对象被输出,这是调试过程中比较常用的功能。该值得一提的是,在这里,我们可以直接输入代码,立即执行。
其他区,大家自行探究吧,说了这么多,剩下的也就是孰能生巧啦。
二、CSS样式调试
好吧,这回,我们不用F12。换个cool的方法。在页面上你想调试的元素上点击右键->审查元素(N)。然后,你就快速地来到CSS调试界面,并且已经帮你定位好元素。
左侧是实时html结构。
右侧第一个区域是所有对当前元素起作用的CSS属性。
右侧第二个区可以看到文件里相应的CSS原文。
在这里,你可以直接对实时html结构进行编辑、可以对css进行编辑。重点是,你可以马上看到修改的效果,再也不用一遍又一遍地刷新页面了!
分享到:
相关推荐
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具,具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688,如还不会,可私信我。
它基于 Firefox 和 Chrome 浏览器的插件形式存在,允许用户录制、编辑和回放浏览器操作,以进行功能性和回归测试。在 Chrome 浏览器上使用的 Selenium IDE 插件,为软件测试人员提供了极大的便利,减少了手动测试的...
这个工具集成了强大的调试功能,使得开发者在编写PHP代码时能够更有效地定位和解决问题,同时也优化了在Chorme浏览器上的前端调试体验。 在Sublime Text中,xedebug helper提供了与Xdebug的集成,Xdebug是一款广泛...
标题中的“delphi 下用Chorme 内核开发的浏览器示例程序”指的是使用Delphi编程语言,结合CEF库,创建一个具备浏览器功能的应用。这个示例程序可以在Delphi的不同版本上运行,如`DELPHI 7`、`DELPHI XE` 和 `DELPHI ...
2. 自动更新:Chrome浏览器具有自动更新机制,会定期检查并安装最新版本,确保用户始终使用安全且功能齐全的浏览器。 五、隐私与安全设置: Chrome提供了多种隐私和安全选项,如无痕模式、内容设置、扩展程序管理等...
4. 编写和测试代码,调试可能出现的问题,确保浏览器组件能正常工作。 5. 注意安全问题,避免加载不安全的网页,防止潜在的跨站脚本(XSS)攻击和内存泄漏等问题。 总之,易语言Webkit Kirinoium2.0 Chrome模块为...
vue超级季好用的谷歌浏览器调试工具,可以直接查看节点内容、vuex数据准状态情况
"AxureRP_for_chorme_zip.zip" 是一个专门为谷歌浏览器(Chrome)定制的扩展插件包,旨在帮助设计师在浏览器环境下预览和测试他们的Axure原型。 首先,我们要了解Axure RP的功能。它提供了丰富的控件库,用户可以...
下面将详细介绍标题和描述中提到的三个重要插件:Infinity、FeHelper以及AdBlock,并结合Chrome的扩展程序安装方法进行深入讲解。 1. Infinity:这是一个旨在美化Chrome浏览器界面的插件,提供了个性化的主题和定制...
此“chorme最新版v69.0.3497.8132位离线安装包(2018.09.04)”是指在2018年9月4日发布的Chrome浏览器的69.0.3497.81版本,适用于32位操作系统。 该版本的主要亮点包括: 1. **性能优化**:Chrome v69对内核进行了...
本教程将详细介绍如何利用MFC通过CEF封装Chrome浏览器内核,实现一个具有前进和后退功能的网页浏览组件。 首先,我们需要理解CEF的工作原理。CEF基于Chromium项目,它包含了Chromium的大部分功能,如HTML5解析、...
7. **开发者工具**:Chrome的开发者工具是前端开发的重要辅助,V44可能引入了新的调试功能、性能分析工具,以及对移动设备模拟的改进。 8. **性能监控**:可能加入了更精确的性能监控工具,帮助开发者识别和解决...
对于Postwoman来说,它的Chrome扩展版本使得用户可以直接在浏览器环境中进行API接口的调试,无需离开当前的工作流程。 首先,了解如何在Chrome中安装扩展程序是必要的。通常,这可以通过以下步骤完成: 1. 打开...
在这个项目中,开发者利用VB6.0的界面和功能来创建一个能够浏览百度网页的简易浏览器。 描述中提到,“vb百度网页设计,打开vb6.0可以运行”,意味着这个程序是使用VB6.0版本编写的,并且用户需要安装这个版本的...
chromedriver 适用于chrome谷歌浏览器版本(103.0.5060....谷歌浏览器驱动主要用于selenium自动化操作,Python调试脚本。 该资源包含linux,mac,Windows三个系统版本。 解压对应的zip压缩包即可,经测试可正常使用。
在“chorme_plugin”这个压缩包中,我们可能找到了一个或多个上述组件,特别是内容脚本,用于实现JS注入功能。创建一个注入JS的扩展,我们需要做以下几步: 1. **编写manifest.json**:定义扩展的元数据,并声明...
在使用“chorme90 xshell7安装包”时,首先确保你的系统环境满足软件的运行需求,然后按照提供的安装指南进行安装。通常,Linux 系统可能需要管理员权限才能正确安装。安装过程中,如果遇到依赖问题,可以通过包管理...
6. **开发浏览器的不二选择**:对于希望创建具有高度定制化功能的浏览器应用,或者需要在桌面应用中集成网页浏览功能的开发者来说,CefSharp是一个理想的选择。它可以让你自定义用户界面,实现特定的网络协议,甚至...
本文将详细介绍关于"chrome 浏览器离线安装包 91.0.4472.77(正式版本) (64 位)"的相关知识点。 1. **离线安装包**:离线安装包是指不依赖网络即可完成安装的程序包。对于Chrome浏览器的离线安装包,用户在没有...
2. **稳定性**:开发者模式的扩展可能不稳定,因为他们是开发阶段的版本,有可能导致浏览器崩溃或功能异常。 3. **自动更新**:开发者模式的扩展不会自动更新到最新版本,可能会错过重要的安全修复和功能改进。 ###...