vscode debugger for chrome 调试webpack的配置问题

重点是:devtoolModuleFilenameTemplate这个配置项

module.exports = {
  entry: ‘./app.ts‘,
  output: {
    filename: ‘bundle.js‘,
    publicPath: ‘/assets‘,
    devtoolModuleFilenameTemplate: ‘../[resource-path]‘
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [‘.webpack.js‘, ‘.web.js‘, ‘.ts‘, ‘.tsx‘, ‘.js‘]
  },
  devtool: ‘source-map‘,
  devServer: {
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: ‘ts-loader!source-map-loader‘ },
      { test: /\.html$/, loader: ‘raw-loader‘                  }
    ]
  }
}
时间: 2024-10-06 07:38:28

vscode debugger for chrome 调试webpack的配置问题的相关文章

VSCode配置 Debugger for Chrome插件

Debugger for Chrome这个插件是直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能进行打断点. 首先在左侧扩展栏找到这个插件下载好了后重启编辑器之后配置 配置步骤如图: 图中配置字段信息解释如下: version : 你定义这个配置文件的版本,生成的时候默认是0.2.0 configuration:配置域 name:配置文件的名字,可以自己起 type:调试的类型,node是vscode本身就支持,其他就需要下载插件了 req

WebStorm+Chrome调试Vue步骤

在调试时请 注意 : 在WebStorm中启动调试时,WebStorm会根据你设置的url,自动打开新的Chrome浏览器进程访问这个设置的url,而且这个浏览器页面和你平常看到的浏览器差异会比较大,看不到书签栏,也看不到你先前所装的所有插件.这是因为平常我们打开Chrome浏览器进程时,并不会添加–remote-debugging-port选项,而WebStorm无法让已经打开的Chrome实例支持调试,所以必须重新打开一个新的Chrome浏览器进程,而且不能和原来的Chrome浏览器进程使用

Chrome调试手机页面

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤 打开 仿真面板.如图所示: 可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸. 可以在

chrome调试hove等类似事件

前台开发过程中经常会用chrome调试代码.但是有的时候,hover或者js控制的属性显示不全 解决办法有两种: 1.根据chrome版本不一样(检查两个字)可能会有所差别 2.图中有标记

Chrome调试本地文件无法使用window.opener对象进行窗口间值传递

今天在百度BAE上建了个应用,svn上传后发现页面间互调有些问题,几经查询发现: (1)IE下正常的window.opener.object1.object2页面间对象访问方法在Chrome下不能使用,修改为window.opener.document.getElementById('object2')解决问题: (2)Chrome调试本地网页文件时无法使用window.opener对象访问父窗口内的对象,也就无法实现窗口间的值传递.

Google Chrome 调试JS简单教程[更新]

题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本: 32.0.1700.107 m 我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁.又打小广告了……^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十分偏爱chrome的debug. chrome对于在前端打拼的兄

Chrome调试小技巧

前言: 除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率. Sources页 command + p 文件跳转 使用Sublime的人或习惯用command + p 进行文件的跳转,在chrome dev tools中其实也有类似的跳转方法. command + p command + p + 文件名 + : + 数字 command + shift + o 任意方法跳转 Sublime中使用command +R 进行方法跳转,而在dev too

chrome调试第二章

本次chrome调试总结是本人亲自测试总结的chrome调试技巧.没有详细的截图. 1 shift+enter 在console中编写运行js代码,但是enter会导致运行js文件. 2 ctrl+l 清除控制台 3 ctrl+p 定位文件 4 ctrl+shift+c 快速检索元素 5 console.table() 列出使用table的布局 6 console.dir(document.body)列出body的所有属性,以javascript的形式. 7 ctrl+[ chrome开发工具的

Chrome调试javacript禁止缓存

/********************************************************************* * Chrome调试javacript禁止缓存 * 说明: * 最近在调试系统页面,js经常被Chrome缓存,可以在开发者模式下关闭缓存功能, * 当然在隐身模式下调试也是OK的. * * 2017-8-22 深圳 龙华樟坑村 曾剑锋 ************************************************************