`

chrome的开发者工具(F12),十分好用

阅读更多
做前端开发,调试javascript,调试CSS以前是一个很麻烦的事情

后来FF的firebug相当不错,现在chrome自带的开发者工具也很强大

在chrome按下F12,就可以启动开发者工具



在js代码左边的行数上点击,可以打断点,然后右边的按钮就可以debug了

和eclipse的debug工具基本是一样的,F10(step over)是单步执行,F11(step into)是跳进方法,shift+F11(step out)是跳出方法

Elements标签也很好用,在这里可以看到HTML的页面结构,以及各元素的CSS样式,在调整HTML布局和CSS的时候特别好用

Network标签可以用来监控页面和server的http交互的信息

上手以后,我现在基本就不用firebug了
  • 大小: 67.6 KB
分享到:
评论

相关推荐

    轻松玩转chrome开发者模式

    Chrome开发者工具作为目前最强大且最受欢迎的前端调试工具之一,其功能强大且易用性高,对于提高前端开发效率具有重要意义。本文旨在为初学者提供一个全面的学习指南,帮助大家快速掌握Chrome开发者工具的核心功能与...

    Chrome开发者工具介绍

    由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!

    Chrome开发人员工具导出的har文件如何浏览

    在 Chrome 浏览器中,用户可以通过 F12 或者通过菜单→更多工具→开发者工具来打开开发者工具。在开发者工具中,用户可以看到浏览器缓存各种文件,包括 HTML、CSS、JavaScript、图片、视频等文件。 浏览和下载 har ...

    Python-通过Chrome开发者工具调试Django应用

    而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...

    chrome控件F12开发者模式调试工具使用教程

    chrome控件F12开启开发者模式,十分方便的调试工具使用教程

    chrome F12 根据类名找CSS及动画.zip

    在IT行业中,浏览器开发者工具(通常称为DevTools)是前端开发者不可或缺的利器,尤其是Chrome的F12开发者工具。这个名为"chrome F12 根据类名找CSS及动画.zip"的压缩包文件,显然是为了帮助用户了解如何在Chrome...

    vue调试代码开发者工具

    - **启用**:安装后,打开Chrome的开发者工具(快捷键F12或右键点击页面选择检查),在"Extensions"标签页确认Vue Devtools已启用。 - **使用**:在Vue应用的页面上,Vue Devtools会在浏览器的开发者工具中自动...

    chrome F12显示压缩过了的js代码,可格式化排版成有回车和缩进的js代码.zip

    - 压缩包中的"1.png"和"2.{}.png"可能是展示这个过程的截图,它们可能包含了如何在Chrome开发者工具中定位和格式化压缩JS代码的步骤,帮助用户更好地理解操作流程。 总的来说,掌握在Chrome浏览器中使用开发者工具...

    压缩包,使用与vue2,和vue3开发者工具安装

    Vue 开发者工具(Vue DevTools)是 Chrome 和 Firefox 浏览器上的一个扩展,它极大地简化了 Vue 应用程序的调试过程。下面将详细介绍如何安装和使用 Vue 开发者工具,以及它在 Vue 2 和 Vue 3 中的应用。 **安装 ...

    mastering-chrome-developer-tools:Chrome开发者工具全天研讨会的资料

    Chrome开发者工具是Web开发人员和前端工程师不可或缺的利器,它提供了强大的功能,帮助我们调试、优化和理解网页的运行机制。在"mastering-chrome-developer-tools: Chrome开发者工具全天研讨会的资料"中,我们可以...

    vue开发者工具.zip

    6. 启动Vue DevTools:打开一个包含Vue.js应用的网页,按下F12或者右键点击页面空白处选择“检查”来打开开发者工具。如果Vue DevTools没有自动出现,可以在开发者工具的顶部菜单中点击“设置”图标,然后勾选“Vue...

    Chrome浏览器——开发者工具截屏干货

    使用快捷键 F12 调出开发者工具,你也可以右击鼠标,然后找到检查元素,进入开发者工具 使用快捷组合键 Ctrl+shift+P ,打开一个可以输入命令查找文件的窗口 然后输入: Capture full size screenshot ,意思是...

    chrome.zip vue的chrome的快速开发工具,chrome 的扩展工具

    2. **Vue实例检查**:在安装了Vue.js DevTools后,当你访问一个运行Vue应用的网页时,可以通过F12或者右键选择“检查”来打开开发者工具,然后切换到Vue标签页。这里会显示当前页面上所有活动的Vue实例,包括它们的...

    vue2以及vue3 chrome调试工具

    Chrome调试工具是开发者在Web开发过程中不可或缺的辅助工具,特别是对于Vue应用来说,Vue DevTools是一个必不可少的扩展。 Vue DevTools是一款专门为Vue.js设计的Chrome浏览器插件,它允许开发者深入到应用程序的...

    Python爬虫谷歌Chrome F12抓包过程原理解析

    答案就是谷歌Chrome浏览器的F12快捷键,也可以通过鼠标右键菜单“检查”(Inspect)打开Chrome自带的开发者工具,开发者工具会出现在浏览器网页的左侧或者是下面(可调整),它的样子就是这样的: 让我们简单了解...

    React开发者工具安装react-dev-tools.rar

    打开开发者工具(快捷键F12或者右键页面空白处选择“检查”)。 4. 在开发者工具的左侧菜单栏中,你会看到新增的“React”或“⚛️ React”标签,点击即可进入React Dev Tools界面。 React Dev Tools的主要功能包括...

    谷歌浏览器F12汉化版

    总的来说,"谷歌浏览器开发者汉化版"提供了一种更适合中国用户的浏览和开发体验,F12键激活的汉化开发者工具使得Web开发工作更加便捷,无论对于初学者还是经验丰富的开发者,都是一个非常实用的选择。如果你是Web...

    JavaScript检测是否开启了控制台(F12调试工具)

    js检测用户是否打开调试工具(chrome) (function(){ var re=/x/; var i=0; console.log(re); re.toString=function(){ window.close(); return '第'+(++i)+'次打开控制台'; } })(); JavaScript检测是否开启了...

    调试vue3 开发的 chrome 插件

    在实际操作中,一旦Vue DevTools安装成功,开发者可以在Chrome浏览器的开发者工具(F12或右键检查元素)中找到它。Vue DevTools提供了组件树视图,可以查看每个组件的状态,包括数据、属性、计算属性等。此外,它...

    IE开发者人员工具使用说明.pptx

    **IE开发者人员工具使用说明** IE开发者人员工具是前端开发者不可或缺的一个辅助工具,...尽管现代浏览器可能更多地使用Chrome DevTools或其他替代品,但在处理兼容性问题或特定环境时,了解IE开发者工具仍然很重要。

Global site tag (gtag.js) - Google Analytics