Devtools

有人说研发效力是老板工程。不是的，研发效力不是老板工程，它不间接服务于老板(尽管老板可能看一些报表)，反而是服务于宽广产研运（产品+研发+品质+运维）的同学，所以有的公司也把研发效力叫做根底中台，平台工程，开发者服务团队，或者叫开发者服务平台。做好研发效力，做好开发者中台，就容易把公司的各种中后盾能力如同积木般一直组装成一个个的业务能力推给用户。当然如果老板无效能的意识，有信心和能源进步公司的产研效力，为宽广的产研小伙伴提供一个比拟好的开发者服务基础设施，那当然是就更好了。 后期优先发展主营业务老板们大多数后果为先，国内企业大多数也是重视本人主营业务，业务为先，业绩为先。 当公司营收，仍然还在疾速回升期间，主营业务继续向好时，通过减少人力资源仍然能够推高主营业务营收，只有人力老本仍然能够承受的时候，老板个别都会抉择疾速补人头来持续催化营收，而不是重视研发效力方面的进步。当然也有一些始终高举高打各方面投入都很高的公司，比方某二进制公司，即使这样后期的效力相干职能也是四散在公司各个业务线，乱的很。 思考的次要因素：1）立马可行，见效快，短期能补充2）补充人力，老本短期也可承受3）见效快。研发效力短期投入虽不高，但见效慢4）大老板们对研发效力的了解还在晋升阶段中期各地建基地抢人头下面这种堆人催化业务倒退这种状况的下限不高。因为在一个城市里能提供的人力毕竟是无限的，当想倒退得更快时，只能加钱招人，即使这样很多公司还招不到。这也就造成了互联网公司都是全国各地建分基地抢人。 想做搜寻去北京，挨着百度建分公司；想做电商去浙江，就在阿里旁边；做游戏那就去深圳挖腾讯、网易。如果一个分基地还不满足那就建两个。我国IT人才比拟多的省份如下：北京、广东、江苏、上海、浙江、四川、湖北。 研发效力、修炼内功如果多个分基地还不能满足业务倒退，或者公司内曾经人满为患然而仍然业务不够快，这个时候就要好好思考下公司的人效了，尤其是产研运的效率。 这就像一个人学武的后期阶段，尽管每个人抉择的方向不同，然而只有在某一方向上下功夫，必定能疾速让本人的文治俯冲到一个层级。有的长于拳术、有的精于腿法、有的强于兵器、有的则善用暗器。如果还要文治精进，则要修炼内功心法。修炼内功对本人的文治之前修炼的招式有莫大的增益，同时还能有助于修炼其余文治，举一反三。 研发效力如同九阳神功，实打实的内功心法，须要长期修炼，能力造成无上内功。尽管研发效力个别不能短期对主营业务产生间接影响，然而一旦成型增益你出招的速度，力量和准确度，也很容易地把之前拳术能力使用到腿法、兵器、暗器上。 研发效力工作的特点1）长期投入，专业人才不好找2）做的事件多，投入绝对扩散，比方各种基建须要做3）奏效绝对慢，工具平台的建设非久而久之4）好在任督二脉一旦买通，事倍功半，效果显著且长久但研发效力也有危险，修炼不好，容易走火入魔，比方很多公司都魔怔式的统计工时，不晓得是向甲方收钱，还是感觉员工辛苦想处分员工，还有一些拿些虚伪凋敝的指标忽悠他人忽悠领导。汝之蜜糖,彼之砒霜。 开发者服务开发者服务是指为开发者提供的各种工具和服务，以便他们更加高效地进行软件开发。 版本控制系统基础设施服务编程语言、组件和框架调试和测试工具CI/CD工具文档和知识库社区和论坛以上是一些常见的开发者服务，它们能够帮忙开发者更加高效地进行软件开发。 本文总结本文次要陈说了研发效力不是一个老板工程，体面工程，而是实实在在的为产研运小伙伴服务的职能。让大家利用公司的基础设施和平台服务，顺顺畅畅的工作，高效的产出这才是咱们做研发效力的目标。 举荐浏览什么是研发效力？研发效力定义及外围价值研发效力的「道法术器」找到能做好研发效力的人互联网公司研发效力/工程效率团队建设和布局研发效力生态残缺图谱&DevOps工具选型必看感激点赞、转载关注我，理解研发效力倒退动向欢送进入「DevOps研发效力群」一起探讨

对于程序员而言，熟练掌握debug工具和办法无疑是工作中很重要的一部分，而对前端开发工程师来说Chrome Devtools是最为常见的调试工具，本文次要介绍一些应用Chrome Devtools的调试技巧，心愿可能帮忙开发者们进步Debug程度。 01款式调试1. 疾速新增/批改class：选中dom中，点击右侧的 .cls激活后，能够通过抉择框对现有的class进行删减以及通过输入框新增class。 2. 查看计算后的款式：在开发中有一些款式可能是须要通过计算能力失去理论的值的，比方rem，百分比的数值等，而且可能还存在优先级不同导致相互笼罩的状况。这时候如果咱们想看到它在页面中的理论数值时，能够在选中dom后通过computed去看到这个元素的理论尺寸，以及点开尺寸后看到它失效的款式。 3. 色彩抉择/取色器：在调试css时候，可能须要去调试一些色彩相干的数值，chrome提供的色彩选择器能够更为不便的去抉择色彩，同时也提供了取色器可能在页面中选取须要的色彩。 02性能调试1. 环境配置：在开发过程中咱们能够须要在一些特定的环境上来定位和复现问题，chrome提供了一系列的配置，比方：设施型号（UA）、屏幕宽高、网络环境等等。 2. 优化source/network展现：当咱们须要查看该页面的原始文件时，在source中可能会比拟难以找到，此时咱们能够批改下他的显示方式，如下图将Group by folder去掉，他就会改为平铺的进行展现，从而可能更加不便的找到你想要的文件。同样在network栏外面，咱们也能够批改他的排列程序，比方点击Name就会让它依据name的首字母进行排序。 3. 复制数据、复制申请：当波及到一些数据和申请的问题时，咱们能够须要把对应的数据和申请复制下来，再进一步依据这个数据和申请去进行定位，chrome提供了比拟不便的复制办法，比方在控制台输出copy即可把数据复制到剪切板，而对于申请，咱们在network中对这个申请点击右键，就能够不便的将其复制为fetch或者cURL。 03Node.js调试除了前端页面之外，咱们还能够利用chrome Devtools对咱们的node服务进行问题的定位剖析node运行状态，首先咱们能够借助相似v8-profiler-next （https://github.com/hyj1991/v8...），去生成一段时间的代码运行状态，示例代码如下： 'use strict';const fs = require('fs');const v8Profiler = require('v8-profiler-next');const title = 'good-name';// set generateType 1 to generate new format for cpuprofile// to be compatible with cpuprofile parsing in vscode.v8Profiler.setGenerateType(1);// ex. 5 mins cpu profilev8Profiler.startProfiling(title, true);setTimeout(() => { const profile = v8Profiler.stopProfiling(title); profile.export(function (error, result) { fs.writeFileSync(`${title}.cpuprofile`, result); profile.delete(); });}, 5 * 60 * 1000);node环境运行这一段代码后会生成个profiler文件，咱们就能够将这个文件导入chrome devtools去进行剖析： ...

本文首发于政采云前端团队博客：一文洞察 Chrome DevTools 近半年更新了哪些新功能本文由政采云前端团队 @子洋 同学翻译，原文可访问：https://developers.google.com... 前言工欲善其事，必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理，下面我们一起来看看近半年有哪些值得关注的新功能。 DevTools（Chrome 74）的新增功能高亮显示所有受 CSS 属性影响的节点将鼠标悬停在会影响节点盒子模型的 CSS 属性上，如 padding 或 margin ，会高亮显示受到这个属性声明影响的所有节点。 Audits 面板中的 Lighthouse v4新增加的 Tap targets are not sized appropriately 可以检查移动设备上的交互式元素（如按钮和链接）是否设置了合适的尺寸和间隔。 例如：点击目标的大小是否易于点击，或者是否距离其他可点击目标过近，更多： Tap targets are not sized appropriately PWA 分类使用新的徽章计分系统。 Lighthouse 相关介绍可参考：Lighthouse 新增 WebSocket 二进制消息查看器查看 WebSocket 二进制消息的内容： 打开 Network 面板。可参考 Inspect Network Activity 了解 Network 分析的基础使用。 ...

2018年11月2日 上次更新时间：2019年4月28日 Spring Boot开发者工具如何使用DevTools进一步加快Spring Boot开发的速度，并使之更加有趣和高效？ 设定像通常使用Spring Boot一样，设置非常简单。您需要做的就是添加正确的依赖关系，您就可以开始工作了。Spring Boot会检测到这一点，并相应地自动配置DevTools。 如果您使用的是Maven： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional></dependency>另外，在使用Gradle时： configurations { developmentOnly runtimeClasspath { extendsFrom developmentOnly }}dependencies { developmentOnly("org.springframework.boot:spring-boot-devtools")}请注意，该依赖项被声明为可选。这个很重要。这样可以防止将DevTools依赖项过渡性地应用于依赖于项目的其他模块。 自动重启只要您的类路径上的文件发生更改，DevTools就会在应用了新更改的情况下自动重启正在运行的应用程序。在本地进行开发时，这很有用，因为您无需手动重新部署应用程序。 就其本身而言，它并不是那么有用，因为重新启动仍会花费大量时间。幸运的是，由于DevTools使用了一个巧妙的技巧，这些重启比常规重启快得多。 您会看到，在开发应用程序时，通常会更改一个或几个类，并希望在运行的应用程序中检查结果以获取反馈。您更改了应用程序的一小部分，因为大多数已加载的类来自框架和第三方库。 引擎盖下，春DevTools使用两个类加载器-基地和重启。不变的类由基本类加载器加载。您正在使用的类由重新启动类加载器加载。每当触发重新启动时，重新启动类加载器都会被丢弃并重新创建。这种重启应用程序的速度比平常快得多，并且可以替代使用诸如JRebel之类的动态类来重新加载应用程序。 在IDE中触发重启只要类路径发生更改，就会触发重新启动。但是，这取决于您的IDE。这意味着仅更改.java文件是不够的。重要的是您的IDE实际上会更新.class类路径上的文件。 使用IntelliJ IDEA时，需要构建项目（Ctrl+ F9或Build → Build Project）。您还可以将IDEA配置为自动重建。另外，您可以打开Spring Boot运行配置并定义触发应用程序更新（Ctrl+ F10）时发生的情况： Intellij IDEA Spring Boot运行配置 在第一个组合框中，可以选择Update trigger file在调用Update操作时触发DevTools重新启动。或者，您甚至可以选择尝试热插拔的选项，并且仅在热插拔失败时才使用DevTools重新启动。 在第二个组合框中，您可以配置在IDEA窗口失去焦点时（例如，切换到浏览器窗口时）重新加载所有静态资源和模板。 在Eclipse中，仅保存文件就足够了。 仅开发Spring Boot DevTools的使用仅用于开发，而不用于生产。如果您的应用程序检测到您正在生产中，则将自动禁用DevTools。 为此，每当您将应用程序作为完全打包的工件（例如带有嵌入式应用程序服务器的jar）运行时，都将其视为生产应用程序： java -jar devtools-example-1.0.0.jar通过特殊的类加载器（例如在应用程序服务器上）启动应用程序时，同样适用。相反，当您运行分解的工件（例如在IDE中）时，您的应用程序将被视为处于开发模式。使用spring-boot-plugin运行应用程序时也是如此： Maven： mvn spring-boot:runGradle： gradle bootRun实时重载LiveReload是一个有用的工具，它使您可以在更改HTML，CSS，图像等文件时立即在浏览器中更新页面。它甚至可以根据需要对文件进行预处理-这意味着会自动编译您的SASS或LESS文件。 实时重新加载Spring DevTools自动启动LiveReload服务器的本地实例，该实例监视您的文件。您所需要做的就是安装浏览器扩展程序，一切顺利。它不仅对开发应用程序的前端很有用（以防您将其作为Spring应用程序工件的一部分进行分发），而且还可以用于监视和重新加载REST API的输出。 属性覆盖在本地开发应用程序时，通常与在生产环境中运行时具有不同的配置需求。缓存就是一个例子。在生产中，至关重要的是依赖于各种缓存（例如，模板引擎的缓存，静态资源的缓存头等）。在开发中，它可能会因提供旧数据而没有反映您的最新更改而使您感到痛苦。另一个示例可能是增强的日志记录，它在开发中可能有用，但对于生产而言却过于详细。 自己管理双套配置不必要地复杂。好消息是，Spring Boot DevTools开箱即用为您的本地开发配置了许多属性。 spring.thymeleaf.cache=falsespring.freemarker.cache=falsespring.groovy.template.cache=falsespring.mustache.cache=falseserver.servlet.session.persistent=truespring.h2.console.enabled=truespring.resources.cache.period=0spring.resources.chain.cache=falsespring.template.provider.cache=falsespring.mvc.log-resolved-exception=trueserver.servlet.jsp.init-parameters.development=truespring.reactor.stacktrace-mode.enabled=true您可以在DevToolsPropertyDefaultsPostProcessor中检查所有属性的列表。 ...

作者：Brian Vaughn翻译：疯狂的技术宅 https://reactjs.org/blog/2019... 未经允许严禁转载 我们很高兴地宣布推出 React 开发者工具的新版本，现在可以在 Chrome，Firefox和（Chromium）Edge 中使用！ 有什么变化？第 4 版中发生了很多变化！从较高的层面来看，这个新版本应该可以提供显着的性能提升和改进的导航体验。它还提供对 React Hooks 的完全支持，包括检查嵌套对象。 访问互动教程试用新版本或参见更改日志中的相关演示视频和更多详细信息。 支持哪些版本的 React？react-dom 0-14.x: 不支持15.x: 支持（新组件过滤器功能除外）16.x: 支持react-native 0-0.61: 不支持0.62: 将要支持（当0.62发布时）如何获得新的 DevTools？React DevTools 可作为 Chrome 和 Firefox 的扩展程序提供。如果你已经安装了扩展程序，则会在接下来的几个小时内自动更新。 如果你使用独立 shell（例如在 React Native 或 Safari 中），则可以从 NPM 安装新版本： npm install -g react-devtools@^4所有DOM元素都去了哪里？新的 DevTools 提供了一种从树中过滤组件的方法，以便更轻松地导航嵌套的层次结构。主节点（例如HTML <div>，React Native <View>）默认是隐藏的，但可以禁用此过滤器： 如何获取旧版本？如果你使用的是 React Native 60 版本（或更早版本），则可以从 NPM 安装以前版本的 DevTools： npm install --dev react-devtools@^3对于旧版本的 React DOM（v 0.14 或更早版本），你需要从源代码构建扩展： ...

$0$0可以用来表示当前在Chrome DevTools中的Elements栏中查看页面信息中选中的html节点 $0 表示当前选中的节点信息$1 表示当前选中的节点的下一个节点信息$2 表示当前选中的节点的上一个节点信息 $和$$$在console控制台中是document.querySelector方法的别名【未定义$的情况下】，$$则是document.querySelectorAll的方法并将结果以数组的形式返回NodeList类型$$的作用简单表示 Array.from(document.querySelectorAll('div')) === $$('div')$_$_ 可以用在控制台中作为上一个值的引用直接使用，节省时间 使用Math.random(); // 0.2505550952725395$_ // 0.2505550952725395$i搭配插件Console Importer使用，注意：有些页面受CSP安全策略影响无法使用当需要引入某个库时，可以使用$i(npm package name); 比如：$i('lodash');提示成功后，就可以在控制台中使用lodash库提供的方法了 copy(...)DevTools中提供的copy方法可以用来将控制台Console中任何存在的东西复制到粘贴板上 使用msg = 'asdf'.repeat(3); // asdfasdfasdfcopy($_) // asdfasdfasdfconsole.assert使用console.assert断言打印自定义信息提示，如果console.assert第一个参数是falsy值则会打印自定义信息 使用value = null;console.assert(value,'Value is empty'); // VM5452:2 Assertion failed: Value is emptyconsole.table用于将数据按照表格的形式输出，视觉上更加直观 使用console.table(data);console.dir可以使用console.dir将DOM节点的详细信息和默认属性打印出来 使用console.dir(NodeType); Consle is Async在Console中,要使用async await不用手动包裹一层async,可直接使用await,因为它默认已经加了Async resp = await fetch('url');json = await fetch('url');monitor functions可以用来追踪查看某个属性或方法被调用 使用class Person { constructor(name, role) { this.name = name; this.role = role; } greet() { return this.getMessage('greeting'); } getMessage(type) { if (type === 'greeting') { return `Hello, I'm ${this.name}!`; } }}j = new Person('Json');m = new Person('Mary');monitor(j.getMessage); j.greet(); //function getMessage called with arguments: greeting// "Hello, I'm Json!"monitorEvent给某个节点添加监听事件 ...

devTool开发者工具解决的问题部署到第三方APP的代码调试！第三方服务接入到APP的调试！客户端 [类似微信开发者工具公众号模式] ：采用 electronjs 构建跨平台应用。集成浏览器内核 & 客户端插件，构建基本的模拟运行环境！服务：采用扫码验证之后，自动构建一个本地或者公网 服务 。客户端临时访问该服务！调试 [类似微信开发者工具小程序模式] ：采用google开源的 devtools 代理客户端和服务端,连接真机和客户端间的断点和其他常见调试！usesnpm install –save-devnpm run start效果 devTools源码链接：https://github.com/UIorPM/ele…

Vue项目中使用Vue.js devTools这款调试神器，可以极大程度的提高我们的开发效率。安装1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店2、从github上下载到本地。贵宾传送阵，请戳这里→vue-devtools1)、进入到/vue-devtools目录下(npm install或者cnpm install)安装项目所需依赖。2)、安装完依赖后(npm run build或者cnpm run build)编译项目。3)、编译完项目后，在/vue-devtools/shell/chrome/manifest.json中修改persistent参数false为true。4)、在chrome扩展程序页面，打开“开发者模式”，点击“加载已解压的扩展程序”按钮，选择你本地的…/vue-devtools/shell/chrome文件夹, 添加完成后，勾选允许文件地址是否访问。安装完成后devTools的图标会出现在浏览器的菜单栏中。以上两种安装方式告一段落。下面让我们在vue项目中体验一下这款调试神器吧。使用运行Vue项目，在Chrome浏览器中展示项目（浏览器菜单栏中的devTools图标会亮起），按F12打开开发者工具，在开发者工具的菜单栏最后面会看到Vue，选中它就可以尽情的使用了。当然这样一顿行云流水的操作下来，有些人会一次成功，而有些人则不会成功，浏览器菜单中的devTools图标亮滴鸭批，但是就是在开发者工具的菜单栏最后面看不到Vue。嗯~~~，怎么肥事小老弟？请查看项目的index.html中，对vue.js的引用。你肯定使用了压缩版的vue.min.js，使用vue.min.js默认为生产环境，会导致devTools不显示，改为vue.js即可。