devtools_devtools热部署 - CSDN
精华内容
参与话题
  • spring devtools

    2019-02-27 21:25:30
    spring devtools是一种开发工具, 让修改代码快速生效, 提高服务器启动速度 (1)要使用spring devtools 首先要配置pom文件 <dependency> <groupId>org.springframework.boot</...

    spring devtools是一种开发工具, 让修改代码快速生效, 提高服务器启动速度
    (1)要使用spring devtools 首先要配置pom文件

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </dependency>
    

    (2)配置编辑器
    registry–> 搜索 compiler.automake.allow.when.app.running 选择此项
    修改代码之后,执行 build-> build module, 会触发服务的重新启动,让修改生效

    展开全文
  • Chrome DevTools 使用详解

    万次阅读 2018-03-21 14:05:50
    写在前面:Chrome DevTools 系列文章正在紧张地整理当中,目前正在整理 DevTools 的第一部分: Elements,大家可以关注 Chrome DevTools 来获得最新的信息,也可以关注整个项目front-end-study。Chr...

    【转自: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项目,按F12,找到vue即可
  • DevTools开发者工具(chrome谷歌浏览器)

    万次阅读 2020-06-29 22:07:27
    https://developers.google.com/web/tools/chrome-devtools/ (需科学上网) 打开方法: *在Chrome菜单中选择 更多工具 > 开发者工具 *在页面元素上右键点击,选择 “检查” *使用 快捷键 Ctrl+Shift+I ...

    概述

    • 官方文档
      https://developers.google.com/web/tools/chrome-devtools/ (需科学上网)

    • 打开方法:
      *在Chrome菜单中选择 更多工具 > 开发者工具
      *在页面元素上右键点击,选择 “检查”
      *使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

    • 前言:
      chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我的总结一起学习实践一下吧(能帮到你的话随便copy好了,开源时代真好,码字就码了一两个小时,中午的午休都没了还啪啪啪的敲键盘打扰同事休息,一定要好好学啊)。

    九个模块:

    设备模式Device Mode

    支持响应式:可以自己调节页面大小;

    可以按照设备选择用户代理/设备,也可以在devtools setting中增加自定义设备,模仿设备触摸、滚动事件,支持横竖屏,支持选择是否显示设备外框;

    菜单中可以开启媒体查询(查看css中@media设置的各个查询);

    可调节DPR(设备像素比,逻辑像素/物理像素,带Retina屏的设备像素密度高,DPR大),在响应式中可以设置该值,在选择了特定设备时不可选,因为特定的设备的DPR值固定;

    “throttling”可以模拟不同的网络环境,可以限制网速;

    能模拟替换地理位置,模拟加速度计(设备方向);

    元素面板Elements

    能在元素面板查看/选择当前页的DOM树,也可以在页面上点选;

    选中节点后会在元素面板左边显示元素源代码所在位置,右边会显示节点的各级样式,盒模型(Computed),事件,断点,属性;

    DOM代码和样式可以实时修改调试(修改后再刷新页面,修改就失效了,可以选择保存修改,下面sources面板会提到);

    可以在每行代码前面右键添加断点,这点很实用。断点有三种类型:属性改变,子节点改变,节点删除;

    可以右键节点选择节点的状态:active :hover :visited :focus,当你无法模拟这些状态时,这个功能就很实用;

    控制台面板Console

    在控制台能显示浏览器的消息,其中消息分为info,verbose(长消息),error,warning四个等级;

    相同的消息是默认堆叠的,可以设置成按时间戳(timestamps)显示;

    可以选择是否保留历史记录Preverse Log,是否显示网络消息和XHR请求;

    可以用filter过滤器筛选信息;

    可以选择执行环境:top(默认)、 iframe等;

    可以在控制台执行代码段,chrome浏览器内置了一些函数可以使用,有意思的是你可以直接在控制台里定义修改它的函数再使用;

    源代码面板Sources

    在这里可以看到一些源文件;

    类似元素面板中设置断点,这里也可以在每一行代码前设置断点,利用这些断点使代码运行到适当的时候或位置停下来,以便查看特定时刻的变量值、调用堆栈、样式等;

    不过这里的断点设置比前面的更强,可以自定义断点条件,运行到这行代码表达式为true就会停下来;

    中间部分左下角有一个{}大括号图标,可以将压缩的代码格式化(这个很实用啊666);

    右边部分也是关于断点的,可以在这里查看所有的断点,选择一系列事件断点,比如动画,键盘,Load事件,XHR事件等等;

    网络面板Network

    网络面板分为上下五个窗格。

    1. 第一行是control窗格,窗格中的选项用于控制network面板的外观和具体功能;

    2. 功能包括录制屏幕,录制后将会以类似“ppt”的形式将录制的每一帧显示出来(我平时调试动画会用到,很实用),可以拉动时间轴;
      可以选择打开filter过滤器,控制在Request Table窗格(第四个) 中显示哪些下载资源,支持正则表达式过滤,支持选择不同类型资源;

    3. 值得一提的是“Disable cache”这个选项,用于控制是否支持缓存(当你在服务器多次更改css,js文件然后需要在浏览器查看更改效果的时候,你可以打开这个选项,以防浏览器使用的旧的缓存的文件,那样就看不到更改效果了);
      类似设备模式中的throttling,这里也可以模拟网络环境;

    4. 第三个“Overview”窗格,这里面的图标显示了资源检索时间的时间线(资源多的话像瀑布一样),你可以点选时间线的一段时间查看;

    5. 第四个“Request Table”窗格就列出了检索的每一个资源,以及他们的加载时间,资源类型,服务器返回状态码(比如200),大小,鼠标移到右边的彩色条上就能看的详细的瀑布图,更厉害的是右键资源,有很多操作,比如复制资源请求/响应的报头、报文以及URL(报头报文不知道的了解一下计算机网络里面的http协议);

    性能面板Performance

    在这个面板你可以录制一段操作,然后查看录制期间的一些页面性能信息,录制前有几个选项可选,包括网络环境模拟,CPU速度模拟,是否开启录制期间截屏;
    性能面板包含四个窗格:

    1. 制窗格,包含一些录制选项:CPU速度模拟,网络环境模拟,录制期间是否截图,是否开启js记录等等,录制要注意几点:尽可能保持记录简短。简短的记录通常会让分析更容易。避免不必要的操作。避免与您想要记录和分析的活动无关联的操作(鼠标点击、网络加载,等等)。例如,如果您想要记录点击 Login 按钮后发生的事件,请不要滚动页面、加载图像,等等。 停用浏览器缓存。记录网络操作时,最好从 DevTools 的 Settings 面板或 Network conditions 抽屉式导航栏停用浏览器的缓存。停用扩展程序。Chrome 扩展程序会给应用的 Timeline 记录增加不相关的噪声。 以隐身模式打开 Chrome 窗口或者创建新的 Chrome 用户个人资料,确保您的环境中没有扩展程序。

    2. 第二窗格是Overview,是录制页面性能的汇总,包含以下三个图表
      FPS。每秒帧数。绿色竖线越高,FPS 越高。 FPS 图表上的红色块表示长时间帧,很可能会出现卡顿。如果录制开启了截屏,当鼠标悬停overview窗格上时,会显示出每一帧的图片。CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。NET。每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)。深色部分表示传输时间(下载第一个和最后一个字节之间的时间)。横杠按照以下方式进行彩色编码:HTML 文件为蓝色。脚本为黄色。样式表为紫色。媒体文件为绿色。其他资源为灰色。另外,按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 可以打开一个查找工具栏。键入想要检查的事件类型的名称,如 Event。
      搜索工具栏仅适用于当前选定的时间范围。选定时间范围以外的任何事件都不会包含在结果中。利用上下箭头,可以按照时间顺序在结果中移动,第一个结果表示选定时间范围内最早的事件,最后一个结果表示最后的事件。每次按向上或向下箭头会选择一个新事件,可以在 Details 窗格中查看其详细信息。按向上和向下箭头等同于在火焰图中点击事件。

    3. 第三个窗格是火焰图。 CPU 堆叠追踪的可视化。可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded
      事件。 绿线代表首次绘制的时间。 红线代表 load 事件。 开始记录前,不要开启Disable JS
      samples复选框,以便在时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后,火焰图会显示调用的每个
      JavaScript 函数。 火焰图可以用鼠标滚轮调整大小;

    4. 第四个是Details窗格。选择事件后,此窗格会显示与该事件有关的更多信息。 未选择事件时,此窗格会显示选定时间范围的相关信息。

    内存面板Memory

    在此面板录制,可以使用CPU 分析器识别开销大的js函数。
    CPU 分析器准确地记录调用了哪些函数和每个函数花费的时间。也可以将配置文件可视化为火焰图。(执行js比较卡的时候可以用这个工具来查找原因);

    火焰图分为以下两部分:

    1. 概览:整个记录的鸟瞰图。 条的高度与调用堆栈的深度相对应。 所以,栏越高,调用堆栈越深。
      调用堆栈:这里可以详细深入地查看记录过程中调用的函数。 横轴是时间,纵轴是调用堆栈。 堆栈由上而下组织。所以,上面的函数调用它下面的函数,以此类推。高调用堆栈不一定很重要,只是表示调用了大量的函数。但宽条表示调用需要很长时间完成。 这些需要优化。
      鼠标悬停在上面可以看到函数详情。

    2. 此外,除了用内存面板查看函数的内存堆栈情况外,还可以使用 Chrome 任务管理器作为内存问题调查的起点。
      任务管理器是一个实时监视器,可以告诉您页面当前正在使用的内存量。
      按 Shift+Esc 或者转到 Chrome 主菜单并选择 More tools > Task manager,打开任务管理器。右键点击任务管理器的表格标题并启用 JavaScript memory。下面两列是与页面的内存使用有关的不同信息:
      Memory 列表示原生内存。DOM 节点存储在原生内存中。 如果此值正在增大,则说明正在创建 DOM 节点。JavaScript Memory 列表示 JS 堆。此列包含两个值。 您感兴趣的值是实时数字(括号中的数字)。 实时数字表示您的页面上的可到达对象正在使用的内存量。 如果此数字在增大,要么是正在创建新对象,要么是现有对象正在增长。

    应用面板Application

    查看和修改Local Storage与Session Storage:

    1. 可以从 Local Storage 窗格和Session Storage窗格中检查、修改和删除键值对(KVP);使用 IndexedDB 窗格可以检查、修改和删除 IndexedDB 数据。展开 IndexedDB 窗格时,IndexedDB 下的第一个级别是数据库。 如果存在多个活动的数据库,会看到多个条目。 在下面的屏幕截图中,页面只有一个活动的数据库。点击数据库的名称可以查看该数据库的安全源、名称和版本。展开数据库可以查看其键值对 (KVP)。

    2. 使用 Start from key 文本字段旁的箭头按钮可以在 KVP 的页面之间移动。展开值并双击可以编辑该值。在您添加、修改或删除值时,这些更改不会实时更新。在 Start from key 文本字段中输入键可以过滤出值小于该值的所有键。

    3. 在添加、修改或删除值时,这些更改不会实时更新。 点击 refresh 按钮 () 可以更新数据库。
      点击 Clear Object Store 按钮 () 可以删除数据库中的所有数据。 从 Clear storage 窗格中,点击一次按钮注销服务工作线程并移除其他存储与缓存也可以实现此目标。

    4. 使用 Web SQL 窗格可以查询和修改 Web SQL 数据库:
      点击数据库名称可以打开该数据库的控制台。从这里,可以对数据库执行语句。点击数据库表可以查看该表的数据。
      无法从这里更新值,但是可以通过数据库控制台(参见上文)更新。
      点击列标题可以按该列排序表格。

    5. 在 Visibile columns 文本字段中输入一个由空格分隔或逗号分隔的列名称列表可以仅显示列表中包含的列。

    6. 使用 Application Cache 窗格可以检查通过 Application Cache API (HTML5中新加的API)创建的资源和规则:

    7. 每一行表示一个资源。
      Type列的值为以下值之一:
      Master资源上指示此缓存为其主文件的 manifest 属性。
      Explicit此资源在清单中明确列出。
      Network指定此资源的清单必须来自网络。
      FallbackResource 列中的网址作为另一个网址(未在 DevTools 中显示)的回退网址形式列出。
      表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态:
      IDLE缓存没有新更改。
      CHECKING正在提取清单并检查有无更新。
      DOWNLOADING正在将资源添加到缓存中。
      UPDATEREADY在新版本的缓存。
      OBSOLETE正在删除缓存

    8. 清除服务工作线程、存储、数据库和缓存
      有时,只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格,可以选择性地注销服务工作线程、存储和缓存。要清除数据,只需启用想要擦除的组件旁的复选框,然后点击 Clear site data。操作将擦除 Clear storage 标签下所列源的所有数据。

    安全面板Security

    使用 Security Overview 可以一目了然的查看当前页面是否安全。

    点击 View certificate 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源)。

    点击 View certificate 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源)。

    Security 面板可以区分两种非安全页面。
    如果请求的页面通过 HTTP 提供,则主源会被标记为不安全。
    如果请求的页面通过 HTTPS 检索,但页面会继续使用 HTTP 检索其他源的内容,然后页面仍然会被标记为不安全。这称为混合内容页面。 混合内容页面仅受部分保护,因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。

    使用左侧面板可以检查各个安全或非安全源。点击安全源查看该源的连接和证书详情。

    展开全文
  • (先安装了node.js)首先大神是在下载好的nodejs\node_modules目录下进行直接npm安装vue-devtools,安装成功后在此目录下会又vue-devtools文件。 然后,我就成功了!!!开心 接下来就是我搜到的大多数...

    小编最近在学习vue相关的知识,但刚开始就卡在了vue的调试工具上,很苦恼。直接上链接吧:→ 推荐大神解决的文章

    小编极力喜欢这种方式,解决了我遇到的问题,如果你也与我遇到同样问题也可以点击大神链接。(先安装了node.js)首先大神是在下载好的nodejs\node_modules目录下进行直接npm安装vue-devtools,安装成功后在此目录下会又vue-devtools文件。

    然后,我就成功了!!!开心

     

    接下来就是我搜到的大多数的版本::::如果能帮助大家就好,但是我失败了。

    小编出现的问题是:按照→诸如此类的安装方式,大家成功了,我失败了!很苦恼。

    1.  首先点击git的链接下载vue-devtools

    2.  其次npm install,按照以下操作:

    3.  接下来就是更改chrome下的manifest.json文件:

    4.  最后 就是npm run build就ok了。(从此处开始就没成功过,一直卡在这里,估计哪个文件的问题,但一直找不出来原因,就用→文章第一行⬅的那个大神文章解决地,简单易懂。首先得先安装node.js)

    5.  Chrome浏览器 >  更多程序 > 拓展程序 ;之后点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图(网上找的,自己没有成功)

    如果,大家有什么建议,也可以给我分享一下♥

     

    后续中出现问题:

    1. Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author

    解决办法:页面引用的vue是压缩版的,会默认关闭调试,需要另引入vue.js插件(亲测已成功)。

     

    展开全文
  • devtools

    2020-04-18 19:58:26
    devtools Type: boolean Default: true (false in production builds) Usage: // make sure to set this synchronously immediately after loading Vue Vue.config.devtools = true Configure whether to allow ...
  • Vue-Devtools安装配置教程(献给伸手党)

    万次阅读 多人点赞 2018-06-24 13:57:12
    可以先看视频教程:链接最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ...查看过很多博客大多数都是,要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vue-devtoo...
  • vue-devtools-dev下载

    2020-07-30 23:31:46
    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
  • vue-devtools-dev

    2020-07-29 14:20:04
    vue调试工具,给那些网络被墙了的人准备的,方便下载。
  • 文章目录打开DevTools元素面板Style面板Computed面板devtools取色器 打开DevTools devtools,即Chrome 开发者工具,Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和...
  • spring-boot-devtools模块可以包含在任何项目中,以提供额外的开发时特性。要包含DevTools支持,请将模块依赖项添加到您的构建中,如Maven和Gradle的以下清单所示: Maven &lt;dependencies&gt; &lt...
  • 首先devtools是什么? devtools:是boot的一个热部署工具,当我们修改了classpath下的文件(包括类文件、属性文件、页面等)时,会重新启动应用(由于其采用的双类加载器机制,这个启动会非常快,如果发现这个启动...
  • Chrome “DevTools was disconnected from the page” 最近在调试项目的时候 Chrome出现了“DevTools was disconnected from the page” 这样的错误并且崩溃了,经过多方查证发现是浏览器版本问题,建议下载安装...
  • vue-devtools安装(图文详细教程)

    万次阅读 2019-07-16 11:33:30
    1、下载vue-devtools工具 直接在github 上下载解压,网址为https://github.com/vuejs/vue-devtools 运行cmd打开终端,进入到解压后的目录里,windows切盘符命令为D: 进入目录文件为cd ./xxx 显示所有目录为dir 进入...
  • devtools was disconnectedfrom the page

    万次阅读 2017-06-12 18:44:46
    谷歌浏览器调试程序时报了这个错,最后发现是浏览器兼容性问题,升级到最新的版本 61.0.3124.10(正式版本)就没问题了 旧版本的58和59都有问题。 所以调试前端代码(js css)的时候如果有问题,一定要一步一步往...
  • 网上很多安装react-devtools的教程都已经过时了,其实大家完全不需要看那些教程,看笔者的教程也不是非常有必要,但是笔者会交给你方法,并附带安装步骤: 第一步,找到facebook的react-devtools地址进行下载【要...
  • 关于vue DevTools不能使用的解决办法

    万次阅读 热门讨论 2017-12-08 17:37:49
    最近使用vue发现vue DevTools 不能在本地使用,在网上找了找资料,没看到太满意的答案,于是自己就鼓捣起来了,进chrome扩展中心才发现问题出现在这里: 进去之后你就会发现问题了,原来事情是如此的简单,...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 折腾R程序包-devtools

    万次阅读 2015-07-19 19:54:13
    今天因为某些原因打算安装R程序包devtools,我用的是XP平台,R3.2.1。开始时,download了devtools的包压缩文件,然后在R程序menu: packages -> installpackages from local zip files中安装,然后发现其需要一大堆...
  • vue-devtools 调试使用详解

    万次阅读 2019-10-25 08:42:44
    但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。 一、下载chrome扩展插件 GitHub下载地址: git clone https://github.com/vuejs/vue-devtools.git 建议使用npm淘宝镜像按照依赖包 ...
1 2 3 4 5 ... 20
收藏数 43,752
精华内容 17,500
关键字:

devtools