: OK // 内容类型: text/plain response.writeHead(200, { 'Content-Type': 'text/plain' }); //页面显示内容...response.end('姓名：'+params.name); }).listen(8888); 二、 包资源管理器NPM npm全称Node Package Manager，他是node包管理和分发工具...是开发阶段测试运行 build是构建编译工程 lint 是运行js代码检测 三、Webpack Webpack 是一个前端资源加载/打包工具。...打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js 执行编译命令 Code webpack 创建index.html ,引用bundle.js html <html...Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数， 返回转换的结果。
后面就可以考经验解决很多问题，并且能正确避开当年踩过的雷区，减少再犯次数，节省解决问题的时间，大大提高开发效率和编码水平。我想这应该是掌握调试技能的一个很重要意义，而不仅仅是为了解决问题。...下载人家的demo运行，点击登录之后不出错页面也不跳转 请求数据后填充到页面，但是页面却不显示数据 某个请求总是被取消 明明按照人家教程来写，代码一模一样，却得不到和教程一样的效果 无意中写错字母，大小写部分...可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码。 只要找到源码，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发工具就会进入调试状态。...在Chrome和VS Code中调试Vue.js：此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展，推荐。...注意：如果没有命中断点并且你的断点不是红点，需要一个骚操作才能在VSCode断点调试：在打开的谷歌浏览器的开发工具源码断点调试一次（或者加关键字debugger触发调试,参考上面方式一），运行到断点处VSCode
（方便查看不同状态下元素的样式） 利用chrome来查看和编辑本地文件 选择下一个匹配项 可视化的DOM阴影 奇淫技 Chrome Dev开发者选项 总结 转用Chrome，不仅仅因为它的插件之丰富...注意输入https而不是http,www.google.com后要加个.hk chrome实用插件： 用了几个月的推荐： Infinity(必备)：善心悦目的背景，而且可以自定图标。...Profiles Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。 Resources Resources工具显示资源的，跟Sources不同的是，它会对文档类型分类。...，chrome控制台就会跳转到你输入的行号所在的行。...你也可以另存为~ Chrome Dev开发者选项 Chrome Dev开发者选项,浏览器进入chrome://flags，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。
0x02 安装配置 安装webpack-dev-server 使用 webpack-dev-server 需要安装webpack、 webpack-dev-server 和 html-webpack-plugin...配置模板文件 将原来的 vue_02.html 作为模板文件，为了和内存中的 index.html 文件名区别，注意将 vue_02.html 中的script 标签去掉，内容如下： <!...debug调试 使用了 webpack 之后就不能采用传统js的调试方法在 chrome 中打断点。...common：工具类 component：组件目录，本项目不用。 mock：存放前端单元测试方法。 module：存放各业务模块的页面和api方法。...*/ /*编写页面样式，不是必须*/ 在页面的template中填写 “测试页面显示...”。
区分 dev 与 release 模式 这里的 dev 是指正常的开发流程，release 是指开发完成，准备打包上传到应用商店的过程。.../firefox 插件 API 里面的函数混淆，需要加载它们对应的 externs 文件，一般只需要这两个 chrome_extensions.js、chrome.js。...对于非专业前端程序员来说，要想使用 React，cljs 比 jsx 是个更好的选择，Hiccup-like 的语法比 jsx 更紧凑，不用再去理睬 webpack，babel 等等层出不穷的 js 工具...里面加载宏的机制有别于 Clojure，一般需要单独把宏定义在一个文件里面，然后在 cljs 里面用(:require-macros [my.macros :as my]) 这样的方式去引用，而且宏定义的文件名后缀必须是...最近看到这么一句话，与大家分享： 也许 Lisp 不是解决所有问题最合适的语言，但是它鼓励你设计一种最合适的语言来解决这个难题。 出处忘记了，大体是这么个意思。
/src/main.js dist/bundle.js main[1] 这是什么意思呢？ 上面的有一个警告和一个错误，主要看错误信息的话就是无法介绍相关的路径信息。...当然有办法，可以使用webpack-dev-server工具。...image-20200307165153270 从上面可以看到图片的文件名已经被转为 一些看不懂的 hash值了。那么如果想要显示图片的原名称该怎么办？...3.10.2.6 name参数说明：设置源图片文件名 上面的情况希望可以显示源图片的文件名，那么应该怎么处理呢？这时候可以使用name参数，设置如下： { test: /\....image-20200307173304728 3.10.2.7 name参数使用hash值解决同名文件问题 上面已经正常显示图片的源文件名称了，那么有一种情况，我们可以看到图片的文件夹路径是/根路径，
需要注 意的是，在 Node.js 中你不可能在最外层定义变量，因为所有用户代码都是属于当前模块的， 而模块本身不是最外层上下文。...---- __filename __filename 表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径，且和命令行参数所指定的文件名不一定相同。...---- console console 用于提供控制台标准输出，它是由 Internet Explorer 的 JScript 引擎提供的调试工具，后来逐渐成为浏览器的实施标准。...2 console.info([data][, ...])该命令的作用是返回信息性消息，这个命令与console.log差别并不大，除了在chrome中只会输出文字外，其余的会显示一个蓝色的惊叹号。...5 console.dir(obj[, options])用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。 6 console.time(label)输出时间，表示计时开始。
使用 HMR 的过程中，通过 Chrome 开发者工具我知道浏览器是通过 websocket 和 webpack-dev-server 进行通信的，但是 websocket 的 message 中并没有发现新模块代码...蓝色方框是 webpack-dev-server 代码控制的区域，洋红色的方框是文件系统，文件修改后的变化就发生在这，而青色的方框是应用本身。...第二步是 webpack-dev-server 和 webpack 之间的接口交互，而在这一步，主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack...第三步是 webpack-dev-server 对文件变化的一个监控，这一步不同于第一步，并不是监控代码变化重新打包。...使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。...处理模块化： CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。.../dist'),//打包后的文件存放的地方 filename:'bundle.js' //打包后输出文件的文件名 } }; 注意，这里把打包后输出的文件名命名为bundle.js...，所以在index.html中需要修改引入的js文件名，index.html的内容是： <!...文件中出现bundle.js： 图片4.png 浏览器打开index.html，发现正常显示： 图片3.png 注意，命令行直接执行webpack，前提是全局安装了webpack，如果不是全局安装，还需要在后面加上入口文件的路径
浏览器版本 73.0.3683.103（正式版本）总结 本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample...七种断点类型 行断点：代码运行到当前行之前暂停执行 在源代码添加debugger关键字 或者点击Sources面板中的源代码的行号 条件行断点：当满足条件时才会触发该断点 右击Sources面板中的源代码的行号...（目前只支持自动识别，不支持添加映射） 绿标文件：成功的映射到本地的文件，在 Styles 和 Sources 中的文件名前，都会添加绿色圆点作为标识 目前 Devtools 已经支持 sass/scss...，指定 DevTools 应保存更改的目录，当在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到所选的本地目录中，重新加载页面时，DevTools 提供本地修改的文件，而不是请求的网络资源.../ [3] Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2
打开页面就可以成功显示了 mode的可选值 mode节点的可选值有两个，分别是： development 开发环境 不会对打包生成的文件进行代码压缩和性能优化 打包速度快，适合在开发阶段使用...，常用的webpack插件有如下两个： webpack-dev-server 类似于node.js阶段用到的nodemon工具。...这种打包实际上时虚拟打包，并不是每次保存打包之后将main.js进行了修改，当我们修改代码保存自动打包之后，我们发现页面UI并没有变化，那是因为main.js实际上没有修改，访问自动打包修改后的页面需要访问本地...文件名跟你前面设置的打包文件名一样，虽然看不到这个文件但是可以进行访问，我们需要把页面引入链接从 new.js改成新生成的保存到内存中的new.js，完成这两个步骤就可以真正的实现自动打包并实时演示了。...html-webpack-plugin 当我们开启了自动打包服务功能，访问服务器后，显示的是根目录，需要点击一下文件夹，才能显示页面文件index.html，我们只需要把页面文件copy一份儿到根目录
小飞同学主要负责借贷业务，这类业务涉及C端用户，而且涉及金钱，所以问题的严重性不言而喻。最终，这次事故导致他的转正申请未能通过，实在是遗憾。 事故原因 后来，小飞问我，该如何尽量避免这种白屏问题。...无论是在现代浏览器中使用最新的特性，还是在旧版浏览器中提供兼容性支持，browserslist都能帮助你轻松管理和配置项目的兼容性需求。...它在多个工具中都被广泛使用，比如eslint-plugin-compat和@babel/preset-env等。...，我们可以使用husky工具来在commit前执行校验。...，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
整理了一下触发这个问题的条件： Chrome 浏览器里安装了 React Dev Tool 插件 在 Tab 1 中打开了 Chrome 的 Developer tool 切换到 Tab 2，让 Tab...而触发 Issue 的代码则是： var loadCheckInterval = setInterval(function() { createPanelIfReactLoaded();}, 1000...React DevTool main.js 修改时间 那么，问题就出现在 setInterva 方法里。...因此 如果你最近用的 Chrome 59 也异常，请禁用 React、Vue、Ember 等开发者工具。...如果你最近用的 Chrome 59 也异常，请禁用 React、Vue、Ember 等开发者工具。 你呢，中招没？
当你想看一个文件的内容时，按下“T”键，搜索文件名，竟然能直接跳转到目标文件。...键 接着你会被重定向到 https://github.dev/vuejs/vue 是不是很爽，和本地vscode一模一样 2.2 使用"github1s.com" 仅仅需要将“github”更改为“github1s...是的，咱们可以通过修改“L”+行号链接到所需的代码。 4. 链接到多行代码 既然我们可以链接到一行代码，那可以链接到多行吗？当然可以了！！！...推荐一个chrome插件，名字是sourcegraph。 安装插件后，将鼠标放在使用该功能的位置时，会出现一个按钮。单击就可以跳转到定义它的位置。 6....查看快捷键列表 github提供了许多快捷键来帮助我们阅读代码，但记住它们真不是一件简单的事，咱们可以使用“Shift”+“？”显示快捷方式列表。
可以看出，cat 命令以纯文本格式显示文件的内容，而 bat 命令显示了语法高亮和整齐的文本对齐格式。...从上面 bat 命令的输出，可以看出是有表格线的，如果你只想显示行号（而没有表格）可以使用-n参数来实现，虽然 cat 执行也会显示行号，但还是没有 bat 执行输出后的效果美观。...--style=numbers,changes可以使用仅显示 Git修改和行号，而不显示网格和文件标题，设置BAT_STYLE环境变量以使这些更改为永久。...-x，--across：对网格进行排序，而不是向下排序 -F，--classify：按文件名显示类型指示器 --colo[u]r：何时使用终端颜色 --colo[u]r-scale : 清楚地突出显示文件大小的级别...08ag ack和ag是两个文本搜索工具，比自带的grep要好用得多。 在指定目录下搜索文本时，不需要像 grep 那样指定各种命令行选项，输出结果也会包含文件名和行号，并且会高亮显示搜索关键字。
当你想查看一个文件的内容时，你可以按 "T"键，然后输入文件名，就可以直接跳到目标文件。...键 然后页面会被重定向到 https://github.dev/vuejs/vue 2.2....我向你推荐一个chrome插件，名字叫sourcegraph。 当该插件安装后，当鼠标放在使用该功能的地方时，会出现一个按钮。点击可以链接到它被定义的地方。 6....查看快捷键列表 GitHub提供了很多快捷键来帮助我们阅读代码，但记住它们并不是一件容易的事情，幸运的是你可以用 "Shift "+""来调出快捷键列表。...作者：fatfish 译者：前端小智 来源：medium 编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug
选中 Add content scripts to ignore list ，并使用正则表达式输入任意数量的文件名模式，例如 jquery.*\.js ： ? 9....启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件，而不是通过网络获取它。...文件图标显示为带有紫色的覆盖指示符： ? 它还将显示在 Overrides 选项卡和 localfiles 目录中。...Chrome 中的 Storage 标签显示本地存储了多少数据，并提供了一个快速的 Clear site data 选项。 15....你可以点击和智能手机拖到绕X任何Ÿ轴，或按住 Shift 围绕旋转z轴。 强制触摸而不是鼠标或其他本机设备事件。 设置空闲状态以检查你的应用如何响应锁定屏幕。
sublime text 4 Dev mac是一款运行在mac端的代码编辑工具，集窗口分组、项目管理、扩展工具、代码折叠等多种功能与一身，支持vim模式，窗口分组、扩展工具、代码折叠等，而且sublime...触发 + P，可以：- 键入文件名的一部分来打开它。- 键入@以跳转到符号，#在文件中搜索并:转到行号。...2.转到定义使用语法定义中的信息，Sublime Text自动***每个类，方法和函数的项目范围索引。...3.多选同时进行十次更改，而不是一次更改十次。多重选择允许您一次交互地更改许多行，轻松地重命名变量，并以前所未有的速度处理文件。尝试按 + + L将选定内容分为行，并使用?...4.命令选项板该命令调色板抱不常用的功能，如排序，改变语法和更改缩进设置。只需几个按键，您就可以搜索您想要的内容，而无需浏览菜单或记住模糊的键绑定。用+ + P显示命令面板。
你的电脑里得安装好Node.js，并且你得对Node.js和npm包管理工具的使用有基本的了解，本教程不会讲解这些过于基础的知识。...✧ 安装Electron Fiddle工具 在开发第一个桌面应用之前，我要向大家推荐一款官方的工具，这个工具叫Electron Fiddle ，我们可以在这个工具里面调试代码，你可以更改里面的样例代码运行...mkdir my-electron-app cd my-electron-app 2.初始化项目文件夹 npm init 注意： entry point应该是main.js , author和description... 这个页面会显示Hello World ! 以及正在运行的 Chromium、Node.js 和 Electron 版本的信息。...== 'darwin') app.quit() }) Linux 和 Windows 应用程序在没有打开窗口时会退出，而 macOS 应用程序通常会在没有打开任何窗口的情况下继续运行，并且在没有可用窗口时激活应用程序应该打开一个新窗口
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
