devtool_devtools - CSDN
精华内容
参与话题
  • webpack——devtool配置及sourceMap的选择

    千次阅读 2019-03-23 12:13:38
    官方对devtool配置的定义很简单:选择一种 source map 格式来增强调试过程,不同的值会明显影响到构建build和重新构建rebuild的速度。 不过,什么是source map,官方用提供了许多种的source map,其中的区别是什么,...

    官方手册传送门

    官方对devtool配置的定义很简单:选择一种 source map 格式来增强调试过程,不同的值会明显影响到构建build和重新构建rebuild的速度

    不过,什么是source map,官方用提供了许多种的source map,其中的区别是什么,我们在开发中应该怎么选择,都是我们要学习的。

    1. 什么是 source map

    现在的前端代码会通过babel编译或者各类的压缩,在debug时,只能调试编译或者压缩后的代码。简单来说,source map 提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。

    下为 react 项目代码使用source map前后图

    编译后的代码
    在这里插入图片描述

    使用source map后的代码
    在这里插入图片描述

    使用source map后,我们可以相当于是在自己写的代码里调试了~

    1.1 source map的分类

    source map 文件分为2类,内联型和外联型

    • 内联源映射,将映射的数据之间添加在生成的文件中,在 .map 文件中的sourcesContent字段来存放源码
    • 外联源映射,将映射数据存储在单独的映射文件中,使用标记将源链接到源码,一般会去掉源码中的注释

    1.2 source map 关键字

    webpack为 source map 提供了几个关键字,具体的看下表:

    关键字 含义
    eval 使用 eval 包裹代码
    source-map 生成.map文件
    cheap 不包含列信息,也不包括loader的sourcemap
    module 包括loader的sourcemap
    inline 将.map作为DataURL嵌入,不单独生成.map文件

    2. webpack 提供的几种source map模式

    source map模式都是上面介绍的关键字进行拼接构成

    devtool 构建速度 重新构建速度 生产环境 品质(quality)
    (none) +++ +++ yes 打包后的代码
    eval +++ +++ no 生成后的代码
    cheap-eval-source-map + ++ no 转换过的代码(仅限行)
    cheap-module-eval-source-map o ++ no 原始源代码(仅限行)
    eval-source-map + no 原始源代码
    cheap-source-map + o no 转换过的代码(仅限行)
    cheap-module-source-map o - no 原始源代码(仅限行)
    inline-cheap-source-map + o no 转换过的代码(仅限行)
    inline-cheap-module-source-map o - no 原始源代码(仅限行)
    source-map yes 原始源代码
    inline-source-map no 原始源代码
    hidden-source-map yes 原始源代码
    nosources-source-map yes 无源代码内容

    +++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, --

    2.1 品质(quality)说明

    打包后的代码 - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。

    生成后的代码 - 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 生成的代码。示例:你会看到类似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();,而不是 import {test} from "module"; test();

    转换过的代码 - 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例:你会看到类似 import {test} from "module"; var A = function(_test) { ... }(test);,而不是 import {test} from "module"; class A extends test {}

    原始源代码 - 每个模块相互分离,并用模块名称进行注释。你会看到转译之前的代码,正如编写它时。这取决于 loader 支持。

    无源代码内容 - source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置 output.devtoolModuleFilenameTemplate,以匹配源代码的 url。

    (仅限行) - source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你在语句级别上调试执行,也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后,映射关系是不可能实现的,因为压缩工具通常只会输出一行。

    3. source map 选择

    3.1 开发环境

    以下选项非常适合开发环境:

    eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。

    eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

    cheap-eval-source-map - 类似 eval-source-map,每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。

    cheap-module-eval-source-map - 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

    3.2 特定场景

    以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的,例如,针对一些第三方工具。

    inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中。

    cheap-source-map - 没有列映射(column mapping)的 source map,忽略 loader source map。

    inline-cheap-source-map - 类似 cheap-source-map,但是 source map 转换为 DataUrl 后添加到 bundle 中。

    cheap-module-source-map - 没有列映射(column mapping)的 source map,将 loader source map 简化为每行一个映射(mapping)。

    inline-cheap-module-source-map - 类似 cheap-module-source-map,但是 source mapp 转换为 DataUrl 添加到 bundle 中。

    3.3 生产环境

    这些选项通常用于生产环境中:

    (none)(省略 devtool 选项) - 不生成 source map。这是一个不错的选择。

    source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。

    hidden-source-map - 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

    nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

    展开全文
  • vue-devtool 4.15版本

    2020-07-30 23:31:50
    这是一个打包出的chrome vue-devtool 调试扩展攻具版本 4.150
  • Chrome DevTools 使用详解

    万次阅读 2018-03-21 14:05:50
    有这么详细文章,真实很感谢作者!写在前面:Chrome DevTools 系列文章正在紧张地整理当中,目前正在整理 DevTools 的第一部分: Elements,大家可以关注 Chrome DevTools 来获得最新的信息,也可以关注整个项目...

    【转自:https://segmentfault.com/a/1190000007877846】 

    基本够调试用了!有这么详细文章,真实很感谢作者!大笑

    写在前面:Chrome DevTools 系列文章正在紧张地整理当中,目前正在整理 DevTools 的第一部分: Elements,大家可以关注 Chrome DevTools 来获得最新的信息,也可以关注整个项目front-end-study

    Chrome DevTools(Chrome 开发者工具) 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本(Chrome Canary)的 Chrome 浏览器,从这里你可以获得最新版本的 DevTools。为什么 Google 称之为金丝雀呢,因为金丝雀早期在矿井中被用来预警,而该版本的 Chrome 一定程度上也能起到该作用。不用担心 Chrome Canary 会覆盖原本的 Chrome,从 Logo 就可以看出这是两个软件。本文的实操性很强,建议大家在阅读时进行尝试,以加深印象。另外,需要注意一下的是,本文不是对 DevTools 官方文档的翻译,只是对我们实际使用中经常使用到的有用的功能进行整理。

    访问 DevTools

    可以通过以下这些方式打开 Chrome DevTools:

    • 选择右上角Chrome 菜单,然后选择更多工具 -> 开发者工具

    • 右键,选择检查/审查元素

    当然,比较推荐利用快捷键来打开:

    • Ctrl + Shift + I, F12 / Cmd + Opt + I,打开 DevTools

    • Ctrl + Shift + J / Cmd + Opt + J,打开 DevTools,并且定位到控制台面板

    上面两种方式不仅可以打开 DevTools,还可以关闭 DevTools。当然,还有一种方式可以打开 DevTools。

    • Ctrl + Shift + C / Cmd + Opt + C,打开 DevTools,并且开启审查元素模式(相当于点击了 DevTools 左上角的图标: 

    说到快捷键,这里再跟大家介绍几个非常有用的:

    • F5, Ctrl + R / Cmd + R,刷新页面

    • Ctrl + F5, Ctrl + Shift + R / Cmd + Shift + R,刷新页面并忽略缓存

    • Ctrl + '+' / Cmd + Shift + '+',放大 DevTools

    • Ctrl + '-' / Cmd + Shift + '-',缩小 DevTools

    • Ctrl + 0 / Cmd + 0,DevTools 恢复大小

    当然,DevTools 里不仅仅这些有用的快捷键,下面在介绍到具体的场景时再介绍。

    DevTools 窗口


    (图片来自于 Chrome v57.0 截图)

    DevTools 是很多功能的集合,而在窗口顶部的工具栏是对这些功能的分组。最新的 Chrome 主要有 9 个功能组,分别对应了 9 个面板:

    • Elements:在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素,同时也能对这些页面元素进行所见即所得的编辑

    • Console:一方面用来记录页面在执行过程中的信息(一般通过各种 console 语句来实现),另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互

    • Sources:Sources 面板主要用来调试页面中的 JavaScript

    • Network:在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时

    • Performance:在 Performance 面板可以查看页面加载过程中的详细信息,比如在什么时间开始做什么事情,耗时多久等等。有人会问,这个跟上面的 Network 有什么区别呢,上面也能显示耗时信息。在 Performance 面板中,你不仅可以看到通过网络加载资源的信息,还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息

    • Memory:Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况

    • Application:记录网页加载的所有资源,包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息

    • Security:用于检测当面页面的安全性

    • Audits:审计面板会对页面的加载进行分析,然后给出提高页面性能的建议,官网建议查看 PageSpeed Insights 来获得更多的页面加载建议。

    细心的同学一定发现了我们现在使用的 Chrome 上面没有 Performance 和 Memory,而是 Timeline 和 Profiles,是不是我写错了呢?不是的,而是 Chrome 到 v57 后,便将 Timeline 更名为 Performance,将 Profiles 更名为 Memory。目前来看,Google 仅仅是更名以及调整了部分功能所属的面板而已,并没有功能上的增删,这个会在下面介绍各个面板时详细介绍。

    除了 9 个功能面板,工具栏还有 3 个选项,分别是左侧的  和右侧的  ,分别表示检查元素、设备切换以及 DevTools 的定制化面板。检查元素后面在介绍 Elements 时会提到;设备切换是我们比较常用的功能,能够将你的浏览器模拟成一个带触屏功能的移动设备;DevTools 定制化面板是对 DevTools 本身的定制与控制。下面着重介绍下“切换设备”这一功能。

    切换设备

    使用这个功能能够将你的浏览器变成任意一款移动设备,也能为你的网页设定宽高,这在做单页应用时非常有用。现在选中“切换设备”选项,图标由黑色变成蓝色,整个浏览器内容窗口变成上下两部分,上面是选项,下面是网页内容:

    上面有 4 个部分组成,第一个是设置设备类型,第二个代表下面网页的宽和高,第三个代表缩放比例,第四个代表旋转设备甚至选择设备的状态(需要设备支持,比如选择Nexus 5X 时)。我们着重看第一个。

    点击第一个下拉框,出现上图,你们会发现有几条分割线,先说浏览器默认的,有两条分割线,将所有选项分成 3 个部分,分别是

    • Responsive,代表响应式,即你可以随意的拖动改变网页的宽高

    • 常见移动设备,比如 Galaxy S5 / iPhone 6 / iPad 等,选择一项后,就能将浏览器模拟成那个设备的大小、User Agent 等行为

    • edit,编辑,选中之后出现如下界面:

      这个界面也可以通过  -> Settings -> Devices 来打开。在这个界面上,你可以选择你经常需要使用的设备,当然也可以定制你自己的设备。

      分别输入设备名称、设备宽高、DPR(默认是 1,可不填)User-agent(用户代理,可不填),选择屏幕类型,最后点击 "Add",便可以将你的设备加到设备列表里了。这里再多说一下屏幕类型:

      • Mobile:可触屏的移动设备,鼠标指针是粗黑的点,代表手指与屏幕的触点

      • Mobile(no touch):不可触屏的移动设备

      • Desktop:一般指 PC 上的网页,鼠标指针与普通 PC 网页类似

      • Desktop(touch):带触屏的 PC 上的网页

      所有大家看到鼠标指针是个粗黑的点时不要觉得奇怪,那只是代表你现在在操控一台移动设备。

    当你将你自定义的设备添加进设备列表时,DevTools 会自动选中,从而可以在下拉框中看到第四部分:

    • 自定义的设备

    那我的设备举例,我一般不怎么用到移动设备,所以我就保留了一个 iPhone 6,另外我还需要一个 1920 * 1080 的高清屏,所以我以 HD 命名,定义了一个 1920 * 1080 的设备。

    上面大概介绍了 DevTools 的几个面板和另外 3 个功能选项的作用,着重介绍了切换设备的功能,下面我们一起来看一下如何使用每一个面板。

    详细介绍

    下面的例子没有特殊说明均拿 Github 进行举例。

    Elements

    Elements

    Console

    Console

    Sources

    Sources

    Network

    Network

    Performance

    Performance

    Memory

    Memory

    Application

    Application

    Security

    Security

    Audits

    Audits

    相关资料:

    1、https://www.imooc.com/article/2559

    2、https://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

    3、http://blog.csdn.net/tonghuaxl/article/details/73479976

    4、http://www.cnblogs.com/caizhenbo/p/6679478.html#3889967

    5、https://www.jianshu.com/p/471950517b07   【Network分析(包括cookies)】

    展开全文
  • Vue-Devtools安装配置教程(献给伸手党)

    万次阅读 多人点赞 2018-06-24 13:57:12
    可以先看视频教程:链接最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不...

    可以先看视频教程:链接

    最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态

    尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地气

    下面来一个最简便的方法(送给伸手党):

    查看过很多博客大多数都是,要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vue-devtools-master的文件。然后呢,你就要用npm进行install,然后再npm install build。所以这意味着你又要去找npm来装,你会发现,最简便的方法就是下一个集成的node.js。一番辛苦了之后,你就会发现npm安装好了之后,npm install build又会出现一大串的问题。请问哪有那么多时间去google,baidu这些问题?你要的只是简单的安装一个的调试工具,而你又不想FQ。Here we are:

    上GitHub,下载一个已经用npm处理过的Devtools源码,而且已经给你配置好了manifest.json和webpack.config.js文件,已经处理好了,拿来就用。啥也不说了,直接到我的GitHub上找:链接

    下下来之后打开google浏览器,输入地址chrome://extensions/ ,点击加载已解压的扩展程序


    进入到Chrome文件夹下,点击确定:


    我这里是把整个Vue-Devtools适配所有的浏览器源文件都安装了,而你只需要要chrome浏览器的源码就行,所以直接用我GitHub上的Chrome文件夹就行,点击确定


    确定完了之后就会发现链接栏的右边有个V的标志,证明已经成功,但是此时会有很多人F12之后依然在调试界面看不到Vue,有可能是因为你写的程序引用的vue文件是一个vue.min.js文件,是个压缩文件,这个压缩文件是默认不支持调试的,具体怎么调支持调试就请自行baidu吧!这里只需要把你引入的文件的源码,编程Vue.js的就行,不要压缩版的。如果还不行,可以尝试下关闭浏览器再打开。


    这样就已经安装调试成功了。

    展开全文
  • 初学Vue + Vue调试神器 vue-devtools 的安装

    万次阅读 多人点赞 2018-04-17 01:31:21
    Write By Monkeyfly 以下内容均为原创,如需转载请注明出处。 前提 今天准备开始学vue.js了,不为别的,只是因为我女朋友毕设项目的前端是使用vue开发的,而我作为一个前端开发却无能为力,你说可不可笑。...

    Write By Monkeyfly

    以下内容均为原创,如需转载请注明出处。

    前提

    • 今天准备开始学vue.js了,不为别的,只是因为我女朋友毕设项目的前端是使用vue开发的,而我作为一个前端开发却无能为力,你说可不可笑。
    • 她需要一个会vue的前端帮她做界面,而我虽然身为一个前端开发,但是并不会vue,所以作为男朋友的我本身就很自责。
    • 现阶段的情况是:我只是知道有这些框架,再加上公司的项目只用jQuery,其他新的框架也用不上,所以也一直没机会去接触和学习。毕竟,自己也知道自己几斤几两,JavaScript学的就不怎么样,目前还停留在基础进阶的阶段,肯定就谈不上学其他框架了。
    • 我深知自己能力弱,说实话,除了jQuery这个轻量级的js框架会用,其他js框架可以说是都不沾边。我真的是很无奈,可以说是一点忙也帮不上,只能眼睁睁看着困难摆在她的面前却束手无策,这种感觉很难受。
    • 而且作为她来说,男朋友是一个做前端的,需要求助的时候我却帮不了她,我只能回一句:我不会,你找其他人帮你吧。而她呢,只能去求助他人。在她看来,她心里肯定对我充满了失望和不满。

    所以说,不管出于什么理由,始终都不能停下学习的脚步,不会就去学嘛,对不对,我就不信还没有学不会的东西。而且,学了肯定没有坏处,就算现在用不上,说不定日后也会用上的。

    话不多说了,那就开始吧!

    vue学习之旅

    第一步:从官方的vue教程开始学起

    Vue.js【官网】—— 点击查看

    这里写图片描述

    建议有一定的基础再来学(如下图所示)

    这里写图片描述

    何为vue?【官方介绍 — Vue.js —— 点击查看】

    • 首先,关于vue我要说的是,我听到最多的发音是V [vi:] U [ju:] E [i:],即根据vue的字母组成,然后按照字母本身的发音来读,即vue
    • 官方的读法是:Vue (读音 /vjuː/,类似于 view)
    • 它是一套用于构建用户界面的渐进式框架。在这里,提取到两个关键词,构建用户界面渐进式框架。(目前来说,我也不懂,先继续往下看吧)
    • 它与其它大型框架的区别:Vue 被设计为可以自底向上 逐层应用。(可能这就是所谓的渐进式吧,还是不懂)
    • Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
    • Vue.js框架是什么,为什么选择它?(我也是一知半解的,具体的看这里的介绍吧)

    我的理解:

    • vue是响应式的,即JavaScript代码中变量值的改变会反映到HTML元素中,也就是说,实现了数据和视图(HTML元素)的绑定。
    • 以前的做法:如果要改变DOM元素中的内容,我们通常都是使用JavaScript提供的DOM API,先获取到相应的DOM元素,然后进行动态的操作。因为首先要定位到你要修改的DOM元素,然后才能修改数据。如果要改动多个元素的话,我们就需要频繁的进行手动DOM操作。
    • 现在的改变:我们无需关心DOM的更新了,只需要改变数据就可以了。因为数据和视图是绑定的,数据的改变会影响到视图,所以vue帮我们自动更新了视图。

    尝试vue

    尝试Vue.js 最简单的方法就是,自己创建一个.html文件,然后引入vue.js文件,跟着官方的教程自己写一个Hello World的案例。这样做,可以加深自己对vue的理解。

    引入方式(推荐新手使用)

    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    安装教程——点击这里查看(新手不建议看)

    以下是官方的说辞:

    请注意我们不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于Node.js的构建工具时。

    所以,作为新手来说,不要着急学太多的东西,先来体验一下vue的魔力,然后再去学习其他的安装方法。

    复制粘贴下面的代码就能直接运行

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第一个Vue应用</title>
        <!-- 开发环境版本,包含了用帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 声明式渲染 -->
        <!-- Vue.js的核心是一个系统,允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。 -->
        <div id="app">
            {{message}}
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'
                }
            });
        </script>
    </body>
    </html>

    至此,我们已经成功创建了第一个Vue应用!

    效果图(不足为奇,已经见怪不怪了)

    这里写图片描述

    分析(其实好奇的是代码中的语法)

    (1)首先,声明一下你要渲染的区域。也就是说,先创建一个HTML元素,声明一下哪个HTML元素需要使用vue的语法。其实就是声明vue语法的作用域,不声明是没办法使用vue的语法的。
    (2)给HTML元素设置一个class或者id,用于让vue语法找到该元素(指定的渲染区域)。
    (3)在script标签内使用了vue简洁的模板语法,即

    //创建了一个vue的实例
    var app = new Vue({
         el:'id或class',
         data:{
             键名:值
         }
    });

    显而易见,其中做了两件事情:

    • 声明vue语法要应用的范围,或者说要渲染的区域。
    • 定义好需要绑定的数据。因为数据是和视图绑定起来的。视图就是指HTML元素。

    (4)将数据绑定到视图当中。div中双花括号的语法{{}},其实这个整体就是动态绑定的数据。{{}}中放的是变量名或者表达式变量或者表达式的值可以在模板语法中的data进行改变。
    (5)如果要更新视图,那么只需要改变数据就可以了。数据的改变的同时,视图也会自动进行更新。

    结论:
    其实,Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。

    问:我们要怎么确认呢?
    答:打开你的浏览器的 JavaScript 控制台 ,并修改 app.message 的值,你将看到视图相应地更新。

    这里写图片描述

    上面的动态图演示的是,谷歌浏览器已经安装完vue-devtools插件的情形。
    (注:此情形特指控制台中的黑绿色标识,并非指代码的操作)

    第二步: Vue调试神器vue-devtools 的安装

    极速安装Vue调试神器 vue.js devtools(5分钟搞定)—— 点击查看最近安装方法

    最新提示:(写于2018/04/17 凌晨01:27)

    • 下面的这种方式耗时耗力,后来又发现一种全新的极速安装的方法,直接点击上方文字查看最新方法。
    • 如果想要坚持使用旧方法的请忽略上面这句话,继续往下走就行了。

    问题:为什么要安装该插件:
    答案 :因为vue是进行数据驱动的,仅仅从chrome浏览器的控制台进行element查看,是看不到数据的动向的。

    未安装的情形:

    这里写图片描述

    浏览器的控制台会提示你:

    安装前的准备

    • 因为安装依赖需要Node.js环境。所以,第一件事就是安装Node.js
    • 安装完成之后,从github的下载地址将该插件下载下来:https://github.com/vuejs/vue-devtools

    win系统下nodejs安装及环境配置 - CSDN博客

    安装步骤

    • 下载之后,解压文件,然后复制粘贴解压的文件,放在某个盘的某个文件夹下面。
    • 然后通过Windows+R这个快捷键打开“运行”对话框,输入cmd,进入命令行。
    • 在命令行内,进入到vue-devtools-master目录下。
    • 先执行npm install命令;(执行过程比较长,请耐心等待...)
    • 执行成功后,再执行npm run build命令;
    • 这两个命令都执行成功,就可以关闭命令行了。
    • 然后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件)
    • 打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。

    后来才发现,其实安装过程存在进度条的,进度条其实就是图中的#号。(如下图所示)

    1.执行npm install命令

    这里写图片描述

    2.执行npm run build命令

    这里写图片描述

    3.修改mainifest.json 文件

    这里写图片描述

    这里写图片描述

    4.打开谷歌浏览器,设置开发者模式,添加扩展程序文件

    这里写图片描述

    至此,恭喜vue devtools插件已经安装成功!!

    注:Vue.js devtools插件在chrome浏览器安装成功后,在浏览器的右上角会存在一个插件图标。

    5.启动vue devtools插件

    6.打开vue项目,在控制台选择vue

    这里写图片描述

    7.点击vue,查看数据

    这里写图片描述

    可能会遇到的问题

    1.在命令行执行npm install时,会长时间停留在fetchMetadata

    2.npm install 获取 fetchMetadata 的阶段非常慢,有什么方法可以加速呢?

    3.Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法

    展开全文
  • DevTools开发者工具(chrome谷歌浏览器)

    万次阅读 2020-06-29 22:07:27
    概述 官方文档 https://developers.google.com/web/tools/chrome-devtools/ (需科学上网) 打开方法: ...*使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac) ...chrome的开发者工具...
  • vue devtool的安装与使用

    万次阅读 2019-04-17 13:16:21
    vue devtool是chrome的一个调试插件,翻不了墙的话只能手动安装,方法如下: 1.首先是下载: https://github.com/vuejs/vue-devtools 选择下载安装整个ZIP压缩包 2.然后进行解压缩,并在解压后的文件夹里面...
  • 内核开发最好使用devtool而不是通过传统的内核工作流方法来完成,下面会介绍这两个方案的信息。本文介绍使用Yocto Project Linux内核时要执行的几项常见任务。这些任务包括为主机开发系统准备内核开发,准备层,修补...
  • webpack 配置 devtool

    千次阅读 2018-06-19 16:05:38
    在开发环境中我们使用:cheap-... devtool: 'cheap-module-eval-source-map', entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/public"...
  • 小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。...从字面上来想象,devtool 好像跟开发有关...
  • Spring Boot devtool的使用

    万次阅读 2020-05-22 10:32:23
    文章目录添加Spring Boot devtool依赖默认属性自动重启Live Reload全局配置 Spring Boot devtool的使用 Spring Boot为我们提供了一个便捷的开发Spring Boot应用程序的环境,同时为了方便我们的开发Spring Boot应用...
  • webstorm 自带node 调试工具,使用不方便,也不符合前端使用chrome debug的习惯devtool 解决这个问题,让调试node程序和调试网页程序有相同的体验 文档:https://github.com/Jam3/devtool安装:npm install devtool ...
  • 这是啥?是工具! 好吧,我目前只用来测试websocket。在后面我们讲websocket会用到的。 我们需要配置俩个文件 1、config/beans/base.... 'serverDispatcher' =&amp;... \Swoft\View\Middleware\ViewMiddleware::cla...
  • 初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问。我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的...
  • webpack开发调试模式devtool

    千次阅读 2018-09-19 18:45:07
    devtool 有7种模式 eval 文档上解释的很明白,每个模块都封装到 eval 包裹起来,并在后面添加 //# sourceURL source-map 这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件,...
  • Ubuntu R中安装devtools的步骤

    千次阅读 2015-10-14 10:07:24
    在尝试安装spark R的过程中,老是碰到错误,原因就是在安装devtools过程中经常出错,找了找网上的相关资料,才发现需要额外下载几个库,因此将这个过程记录下来。 ... 在执行:install.packages("devtools")之前,需要...
  • webstorm调试vue项目

    千次阅读 2018-06-07 10:41:17
    connection refused,放弃 另一种方式如下,但是我觉得还是没有直接用浏览器调试方便谷歌浏览器添加插件下载地址如下: https://pan.baidu.com/s/1jHI8ugu修改webpack.dev.conf.js将devtool: config.dev.devtool改...
  • devtool是yocto中的一个工具,此命令行工具作为可扩展SDK(eSDK)的一部分,是基础组件。可以使用devtool来帮助构建,测试和打包eSDK中的软件。可以使用该工具有选择地将构建的内容集成到OpenEmbedded构建系统构建的...
  • 编译环境: win8.0 32位 编译工具
  • Mac配置tomcat7.0.73

    千次阅读 2016-12-25 15:58:24
    最近突然心血来潮,想重新学习下javaee技术,以备不时之需,说干就干。由于使用的是Mac系统,之前一直都是在Window系统下面进行开发,以下是详细步骤; 首先下载tomcat,如下图; 配置tomcat环境变量,解压刚才下载的...
1 2 3 4 5 ... 20
收藏数 10,358
精华内容 4,143
关键字:

devtool