谷歌调试工具

1、element

上面是html代码,下面是css样式


2、Network

用于查看某个页面打开时,每一部分资源占用的时间。通常在优化网站性能时需要用到。

也有查找框框用于过滤,xhr表示ajax资源占用时间。一般来说,网页的加载顺序是:样式css——html代码——js代码——图片——视频

我们在代码中的写法就是css——html——js。而图片视频往往比较大,在后面才加载。

size表示大小。里面的from cache表示从缓存中加载的,加载时间为0。

如果使用ajax获取数据,调试时可用:network——点击请求的url



HTML

3、sources和Resources

都表示资源,但是Resouces是表示存储在本地的资源,比如cookie  localstorage  session Storage





sourse下面有个大括号{}  点击可于格式化被压缩的代码




### 如何使用谷歌浏览器的开发者工具调试 Vue.js 应用程序 Vue.js Devtools 是一款专为 Chrome 浏览器设计的扩展工具,旨在帮助开发者更高效地调试 Vue.js 应用程序。以下是有关其使用的详细介绍: #### 工具概述 Vue.js Devtools 提供了一个新的标签页“Vue”,集成到了 Chrome 开发者工具中。它能够直观展示操作 Vue 组件的状态、数据流以及生命周期钩子等内容[^1]。 #### 安装方法 如果在标准版 Google Chrome 中无法正常安装 Vue.js Devtools,则可以尝试以下替代方案之一: 1. 使用 **Google 极速浏览器** 进行安装:按照特定步骤配置开发者模式并加载扩展程序[^2]。 2. 下载官方发布的预编译版本作为独立扩展包,并手动将其添加至 Chrome 的扩展列表中[^4]。 #### 调试前提条件 为了确保 Vue.js Devtools 正常工作,请确认满足以下几个必要条件: - HTML 文件应正确引用未压缩版本的 `vue.js` 文件而非生产环境下的 `vue.min.js` 版本; - 当前项目确实基于 Vue.js 实现了相应逻辑功能模块; - 访问目标页面时采用 HTTP 协议(可通过 VSCode 插件 Live Server 启动本地服务器来实现),而不要直接通过 file:// 方式打开静态资源文件[^3]。 #### 基础使用指南 一旦成功启用该插件,在任何支持 Vue 技术栈构建出来的网站界面里按下 F12 键启动常规审查窗口之后,“Elements”旁边会出现额外标记有 “Vue” 字样的选项卡入口。点击进入后可以看到当前视图所关联的所有实例化对象及其属性结构分布情况等重要信息。 此外还提供了诸如事件监听器追踪、性能分析图表绘制等功能辅助定位潜在问题所在位置。 ```javascript // 示例代码片段演示如何观察响应式变量变化过程 new Vue({ el: '#app', data() { return { message: 'Hello World!' }; } }); ``` 上述例子创建了一个简单的 Vue 实例并将字符串绑定到 DOM 元素上。利用 Vue Devtools 可轻松跟踪此消息值的变化历史记录以及其他相关信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值