在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. php+mysql+smarty+oop

    php+mysql+smarty+oop 设计新闻系统简单的UML模 powerdesigner和diagram designer 设计所需环境.模块.模板样式 数据库uml设计和创建数据库结构 db ...

  2. 【Oracle】oracle10g以后利用q-quote特性简化包含单引号后双引号的字符串写法

    The Q-quote delimiter can be any single- or multibyte character except space, tab, and return. If th ...

  3. ImageLoader

    配置ImageLoader 一般我们在使用ImageLoader的时候,需要在应用程序的入口进行它的一个配置,这个配置一般写到Application里边 * public void initImage ...

  4. [IOS初学]ios 第一篇 storyboard 与viewcontroller的关系

    学习了一下ios,把一个基本的概念搞清楚了,在android或者wp中,大家基本都是习惯与一个画面场景代表一个类,新建场景的时候自动新建了类,但在ios中使用了storyboard之后发现,在stor ...

  5. JavaScript如何使用this

    学习this的使用必须牢记以下两点 1.this是一个只能在函数内部使用的关键字 2.this指向调用函数的那个对象 下面我们来具体讨论一下this的具体使用方法 第一种:通过函数调用的方式----- ...

  6. 键盘和alertView的冲突问题

    冲突现象: textField失去响应收键盘时,如果要弹出一个alertView警告框,就会出现一个现象:在点击了alertView上的事件后,在alertView消失后,会有短暂的出现键盘会再次弹出 ...

  7. C++ I/O stream

    C++ I/O stream Ø The first, you should understand following: ... Ø Text: Ø Version: Visual studio 20 ...

  8. DateUtil工具类

    package com.autoserve.mh.common.util;   import java.text.SimpleDateFormat; import java.util.Calendar ...

  9. 使用 SVN Hook 实现服务器端代码自动更新

    之前的做法是客户端提交代码之后,再去服务器端项目中 svn up 一下来更新代码,让服务器端的项目更新到最新版本.可以编写一个 post-commit 钩子脚本来实现服务器端代码的自动更新,它在 SV ...

  10. 利用jemalloc优化mysql

    一.下载安装jemalloc #wget http://www.canonware.com/download/jemalloc/jemalloc-3.6.0.tar.bz2 #tar jxvf jem ...