在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系。

如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typescript开发的快乐。

首先打开chrome开发者工具的配置项,然后查看sources下的Enable source maps选项,

如果已经选中,请先取消,然后刷新页面,再选中,再刷新页面。

此时我们可以在开发这工具的Sources选项中看到ts文件。

如果你是使用visual studio开发typescript 程序,默认项目是自动生成map文件的。

在每一个js文件下会有map文件的注释说明。

如果没有生成map文件,到工具下的配置项中,配置typescript就可以了。

现在我们可以在开发者工具中设置断点了。

chrome浏览器调试typescript的更多相关文章

  1. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  2. chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...

  3. flex chrome浏览器调试flex程序

    flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...

  4. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  5. 前端chrome浏览器调试总结

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  6. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  7. 前端chrome浏览器调试

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  8. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  9. 用mac的chrome浏览器调试Android手机的网页

    一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...

随机推荐

  1. VMware如何实现和主机共享网络上网

    VMware虚拟机的三种联网方法及原理 一.Brigde--桥接  :默认使用VMnet0 1.原理: Bridge  桥"就是一个主机,这个机器拥有两块网卡,分别处于两个局域网中,同时在& ...

  2. 七月十三号CSS3总结《2D的转换》

    /*2D的转换*/ 位移 -webkit-transform: translate(10px, 10px) 缩放 -webkit-transform: scale(.5, .5)重置原点 ...

  3. Android 进程常驻(使用第三方MarsDaemon)(虽然不可用,但是还是保留下。)

    github地址: https://github.com/Marswin/MarsDaemon 原理分析: Android 进程常驻(0)----MarsDaemon使用说明 Android 进程常驻 ...

  4. 简单说说call 与apply

    Function.call() 将函数作为对象的方法调用,例如:function.call(thisobj,args,........); thisobj  调用function的对象.在函数主体中, ...

  5. iOS编程中遇到的问题

    1.应用在iPhone6plus 系统iOS9.1安装时没遇到问题,在iPhone4s 系统iOS 7时bulid success 但是安装失败提示 There was an internal API ...

  6. python 获取网页图片

    re为正则表达式模组 re.findall在字符串中查找所有匹配的模式,返回一个list urllib2提供了使用简单的url工具 urllib2.urlopen发送url请求,返回一个文件流 imp ...

  7. C#中(int)、int.Parse()、int.TryParse()和Convert.ToInt32()的区别

    转自:http://www.cnblogs.com/leolis/p/3968943.html 在编程过程中,数据转换是经常要用到的,C#中数据转换的方法很多,拿将目标对象转换为 整型(int)来讲, ...

  8. 【emWin】例程一:emWin系列教程简介

    实验指导书及代码包下载: http://pan.baidu.com/s/1bpKbPBx

  9. 后台树状菜单,js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  10. php 删除目录及子文件

    function del_dir($dir) { if (strtoupper(substr(PHP_OS, 0, 3)) == 'WIN') { $str = "rmdir /s/q &q ...