标签分类
技术文章
当前位置:主页 > 计算机编程 > nodejs > 利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

Chrome DevTools直接调试Node.js和JavaScript的实例方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:92

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

这篇文章主要知识点是关于Chrome,DevTools,调试Node.js,JavaScript,利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行),的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Node.js项目实践:构建可扩展的Web应用
  • 类型:Node.js大小:55.6 MB格式:PDF出版:电子工业出版社作者:阿扎.马尔丹
立即下载

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

前提

Node.js 6.3+, 这个可上Node.js官网自行下载;

Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行。

配置

就目前来说,在浏览器端并行调试JavaScript与Node.js还属于新特性,新体验。为了能够正常使用,你还需要做如下配置:

1、输入url:chrome://flags/#enable-devtools-experiments. 注:如果使用中文版Chrome,显示的配置项名称应该为: 开发者工具实验性功能 ,如下图;

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

2、启用它;

3、重启Chrome;

4、打开 DevTools Setting -> Experiments 页卡;

5、找到 Node debugging , 勾选.

最后应该能看到类似下图,表示环境已准备好:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

调试

调试很简单,像普通的js文件一样,利用DevTools进行断点调试.

运行Node.js app

需要在debug模式下运行Node.js应用,很简单,只要添加 –inspect 参数即可。

node --inpect server.js

注:server.js 为我自己的应用文件,自定义,下图中为' node.js ‘。如果顺利的话,应该能看到类似下图信息:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

运行后,可以看到在 DevTools -> Sources 有 server.js 应用:

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

展开后,可以查看当前node应用的js文件,至此,您已经可以利用Chrome进行并行调试操作了。

利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

最后

使用此新版Chrome,还有许多其他的功能,比如在调试期间修改文件内容、保存文件快照等。

还要感谢原作者 Serg Hospodarets 的分享,好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可留言交流。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到解决axios.interceptors.respon、 儿童python编程入门书籍推、 vue项目中使用md5加密以及、 等nodejs文章进一步学习,感谢大家的阅读和支持。

上一篇:没有了

下一篇:nodejs实现本地上传图片并预览功能实例代码

展开 +

收起 -

学习笔记
网友NO.136090

Spring DevTools的介绍

Spring DevTools 介绍 Spring Boot包括一组额外的工具,可以使应用程序开发体验更加愉快。 spring-boot-devtools 模块可以包含在任何项目中,它可以节省大量的时间。 想要使用devtools支持,只需将模块依赖关系添加到你的构建中: Maven. dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId optionaltrue/optional /dependency/dependencies Gradle. dependencies { compile("org.springframework.boot:spring-boot-devtools")} 运行打包的应用程序时,开发人员工具会自动禁用。如果你通过 java -jar 或者其他特殊的类加载器进行启动时,都会被认为是“生产环境的应用”。 将依赖标记为 optional 可选是一种最佳做法,可以防止将devtools依赖传递到其他模块中。Gradle 不支持开箱即用的optional依赖项,你可以参考 propdeps-plugin 。 一、属性默认值 Spring Boot 支持的一些库中会使用缓存来提高性能。例如模版引擎将缓存编译后的模板,以避免重复解析模板文件。 此外,Spring MVC可以在服务静态资源时向响应中添加HTTP缓存头。 虽然缓存在生产中非常有益,但它在开发过程中可能会产生反效果,它会阻止你看到刚刚在应用程序中进行的更改。 因此,spring-boot-devtools将默认禁用这些缓存选项。 缓存选项通常在 application.properties 文件中配置。 例如,Thymeleaf提供了 spr……

网友NO.335354

vue-devtools的安装步骤

vue-devtools 是一款基于chrome游览器的插件,用于调试vue应用,由于国内不能访问谷歌商店(要科学上网),所以安装比较麻烦,写个文章记录一下。 第一步 将vue-devtools clone到本地 git clone https://github.com/vuejs/vue-devtools.git 第二步 在vue-devtools目录下安装依赖包 cd vue-devtoolsnpm install 第三步 编译代码 npm run build 第四步 修改 vue-devtools/shells/chrome/manifest.json 文件,将 persistent改成 true 第五步 打开chrome,输入 chrome://extensions/ 进入到chrome扩展程序设置页面 打开右上角的 开发者模式 点击 加载已解压的扩展程序 选择 vue-devtools/shells/chrome 注意:勾选 允许访问文件网址 至此,vue-devtools已经安装完毕。enjoy it! 总结 以上所述是小编给大家介绍的vue-devtools的安装步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.352383

spring boot devtools在Idea中实现热部署方法

1 pom.xml文件 注:热部署功能spring-boot-1.3开始有的 !--添加依赖--dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId !-- optional=true,依赖不会传递,该项目依赖devtools;之后依赖myboot项目的项目如果想要使用devtools,需要重新引入 -- optionaltrue/optional/dependency 注:project 中添加 spring-boot-maven-plugin,主要在eclipse中使用,idea中不需要添加此配置。 build plugins plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId configuration forktrue/fork /configuration /plugin /plugins/build 2 更改idea配置 1) “File” - “Settings” - “Build,Execution,Deplyment” - “Compiler”,选中打勾 “Build project automatically” 。 2) 组合键:“Shift+Ctrl+Alt+/” ,选择 “Registry” ,选中打勾 “compiler.automake.allow.when.app.running” 。 3 Chrome禁用缓存 F12或者“Ctrl+Shift+I”,打开开发者工具,“Network” 选项卡下 选中打勾 “Disable Cache(while DevTools is open)” 总结 以上所述是小编给大家及时的spring boot devtools在Idea中实现热部署方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! ……

网友NO.240020

详解vue.js的devtools安装

安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程 执行npm install -----npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置---扩展程序--》勾选开发者模式---》添加工程中的shells--chrome的内容或者直接拖动shells--chrome,至此恭喜已经安装成功!!! 5.打开自己的vue项目中,如果是有vue-cli构建的项目,执行npm run dev,打开http://localhost:8080/ 服务器调试地址;至此完成devtools的安装; 使用 打开vue项目,在控制台选择vue: 5.可操作组件查看信息变化(例如分页组件)选择第一页: 选择最后一页: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明