精华内容
下载资源
问答
  • devtool

    2019-05-25 15:42:53
    source-map 生成一个SourceMap文件,源码映射 出错会报错当前的列和行. eval-source-map 不会产生单独的文件、会报错行和列 cheap-module-source-map 生成单独文件、不会产生列。 cheap-module-eval-source-map ...
    • source-map
      生成一个SourceMap文件,源码映射 出错会报错当前的列和行.
    • eval-source-map
      不会产生单独的文件、会报错行和列
    • cheap-module-source-map
      生成单独文件、不会产生列。
    • cheap-module-eval-source-map
      不会产生文件、不会产生列
    展开全文
  • vue devtool 6.0

    2021-04-12 20:24:32
    使用的vue devtool5.3.3不支持最新的vue.js,需要替换vue devtool 6.00 beta支持vue3.0.0。注:解压出来的版本和打包的版本都放在里面了,只需要一种就可以
  • 用于检查React组件性能的devtool扩展。 用于检查React组件性能的Chrome devtool扩展。 支持语言:English
  • 用于检查Vue组件性能的devtool扩展。 Chrome devtool扩展程序,用于检查Vue组件的性能。 支持语言:English
  • Support DevTool

    2020-12-09 03:07:23
    Is there any plan for making paper relevant elements visible in DevTool to improve development experience? AFAIK, <code>Reconciler</code> class has <code>injectIntoDevTools</code> method to do that....
  • Update Devtool

    2020-11-29 19:19:24
    <div><p>Update devtool.md and add missing options. <p>Adds missing bits for the <code>inline-source-map, <code>hidden-source-map</code> and <code>cheap-eval-source-map</code> options. Also did a bit ...
  • vue-devtool 5.1.1

    2020-12-29 13:35:15
    vue-devtool 5.1.1
  • Devtool eval

    2020-12-26 12:40:08
    <p>With devtool eval: <p><code>eval("[...] __webpackManifest__ = ["file1", "file2"] [...]")</code></p> <p>Which obviously does not work. But, by escaping in ...
  • devtool配置

    2020-08-22 13:11:46
    devtool配置一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境 一、devtool配置 1.source map 源码地图 本小节的知识与 webpack 无关 前端发展到现阶段,很多时候都不会直接运行源代码...

    一、devtool配置

    1.source map 源码地图

    本小节的知识与 webpack 无关

    前端发展到现阶段,很多时候都不会直接运行源代码,可能需要对源代码进行合并、压缩、转换等操作,真正运行的是转换后的代码
    在这里插入图片描述
    与此同时就给调试带来了困难,因为当运行发生错误的时候,我们更加希望能看到源代码中的错误,而不是转换后代码的错误

    为了解决这一问题,chrome浏览器率先支持了source map,其他浏览器纷纷效仿,目前,几乎所有新版浏览器都支持了source map
    source map实际上是一个配置,配置中不仅记录了所有源码内容,还记录了和转换后的代码的对应关系

    下面是浏览器处理source map的原理
    在这里插入图片描述
    最佳实践

    1. source map 应在开发环境中使用,作为一种调试手段
    2. source map 不应该在生产环境中使用,source map的文件一般较大,不仅会导致额外的网络传输,还容易暴露原始代码。即便要在生产环境中使用source map,用于调试真实的代码运行问题,也要做出一些处理规避网络传输和代码暴露的问题。

    2.webpack中的source map

    使用 webpack 编译后的代码难以调试,可以通过 devtool 配置来优化调试体验

    module.exports = {
        mode: "production",
        devtool: "hidden-source-map"
    }
    

    3.对于开发环境

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

    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)。

    具体的配置见文档:devtool中文文档,这些信息不用专门去记,开发时查阅文档即可。

    展开全文
  • 一个可以生成状态图表的devtool。 多见于: https://github.com/burrows/statechart.js 一个在statechart.js上生成可视化图形的devtool,请参见以下网址:https://github.com/burrows/statechart.js 支持语言:...
  • webpack之devtool详解

    2020-11-29 20:19:29
    关于Devtool 该选项控制是否以及如何生成源映射。官网上给出的可选值有: 其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的Source Maps,以bundle的大小为代价,但是对于生产,您需要独立的Source ...
  • vue-devtool

    2017-12-07 09:43:10
    vue-devtool,通常用webpack打包的vue,或者说由组件打包的vue在chrome进行调试的效果感人,所以现在可以用vue-devtool进行调试,一款vue的在chrome上的调试工具
  • weex-devtool, 带有 Chrome devtool的weex调试器工具 weex-devtoolWeex Devtools 是一组Weex调试工具。 weex-devtool作为调试服务器,与安卓和 iOS协作,帮助用户检查和调试weex源代码和项目:支持android和 ios ;...
  • Pux DevTool-crx插件

    2021-04-02 03:11:23
    语言:English (United States) Pux DevTool用于可视化应用程序状态和事件。 Pux DevTool用于可视化应用程序状态和事件。 -显示当前事件-检查当前状态-应用程序状态之间的时间移动
  • vue devtool 6.0.0 beta 2

    2020-12-03 18:00:16
    使用的vue devtool5.3.3不支持最新的vue.js,需要替换vue devtool 6.00 bete支持vue3.0.0。注:解压出来的版本和打包的版本都放在里面了,应该只需要一种就可以
  • vue插件devtool.rar

    2020-02-20 17:53:54
    vue 开发时用到的工具,vue devtool
  • 语言:English 一个devtool扩展,用于检查Vue组件的性能。 Chrome devtool扩展程序,用于检查Vue组件的性能。
  • 语言:English 一个devtool扩展,用于检查React组件的性能。 Chrome devtool扩展程序,用于检查React组件的性能。
  • Feature Devtool Configurable

    2020-12-28 11:04:59
    <div><p>The devtool is now configurable and can be configured with a config.ini. <p>There are 3 options, to disable registration of namespace. classes and templates. <p>Example config.ini: <pre><code>...
  • Vuex devtool problem

    2020-11-28 08:27:10
    <div><p>Hi! First of all thanks for this library and for your efforts. <p>I'm running into an issue when using your exemple, my vue devtool show this: ...
  • San Devtool-crx插件

    2021-04-02 04:20:54
    语言:中文 (简体) 浏览器开发人员工具扩展,用于调试San。 打开调试页面,san-devtools插件将显示San版本,然后打开chrome devtool并看到San选项卡。
  • xhr-devtool-crx插件

    2021-04-02 03:46:05
    语言:中文 (简体) xhr-devtool替换response结果
  • httpolice-devtool-crx插件

    2021-03-10 06:31:03
    HTTPolice-devtool是HTTP的一个lint工具。 它截取HTTP标头并将其从浏览器发送到服务器,然后在其中对其进行分析,然后将详细的报告发送回浏览器,并在其中显示该报告。 该项目是开源的,其代码托管在GitHub上,网址...
  • Integromat DevTool-crx插件

    2021-04-01 20:44:43
    Integromat DevTool允许您以全新的方式调试Integromat方案。 它将在Chrome开发者工具中添加一个额外的窗格。 使用这个新的调试器窗格,您可以检查场景的所有手动运行,查看所有执行的操作,查看执行的每个API调用的...
  • Chrome Devtool 学习

    2019-03-20 16:54:46
    虽然devtool一直在用,可是平时使用的也就那几个功能,为了能够深入前端开发的基础,还是要详细的看一下devtool都有哪些功能。

    虽然devtool一直在用,可是平时使用的也就那几个功能,最近看了一遍谷歌官方的DevTool文档。主要记录一些平时没怎么用过的地方。

    断点调试js

    断点类型 使用目的
    Line-of-code 在精确的某一行
    Condition line-of-code 在某一行,但是只有特定情况下才触发
    DOM 在特定DOM节点或者他的子节点改变时触发
    XHR when an XHR URL contains a string pattern
    事件监听
    异常 当代码抛出异常时触发
    函数 特定函数被调用时

    source 面板

    • 在source面板中可以编辑CSS和JS文件,CSS文件在编辑后立即生效,JS文件需要按下Control+S之后生效。值得注意的是应用JS的更改时,不是重新加载整个JS,而是只重新加载变化的函数

    无障碍功能

    审计(audit)一个页面的无障碍功能

    console 面板

    Command Line API
    $_

    $_返回最近计算的表达式的值

    $0-$4

    $0、$1、$2、$3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象的历史参考

    $(selector)

    $(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。此函数等同于 document.querySelector() 函数。

    如果使用了第三方库,比如jQuery,则此功能将会被覆盖。

    $$(selector)

    $$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll()。

    $x(path)

    $x(path) 返回一个与给定 XPath 表达式匹配的 DOM 元素数组

    table(data[, columns])

    通过传入含可选列标题的数据对象记录具有表格格式的对象数据。例如,要在控制台中显示使用 table 的名称列表,需要执行:

    var names = {
    	0: { firstName: "John", lastName: "Smith" },
    	1: { firstName: "Jane", lastName: "Doe" }
    };
    table(names);
    

    在这里插入图片描述

    performance面板

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,876
精华内容 1,150
关键字:

devtool