在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. 【Unity3d游戏开发】unity3D OnTriggerEnter和OnCollisionEnter的一点个人心得(转载)

    此文为转载,因为最近在做U3D,有一些概念弄得不是很清楚,看到这篇博客讲的不错,就转载过来了,方便自己随时查看. ------------------------------------------- ...

  2. ACM:SCU 4437 Carries - 水题

    SCU 4437  Carries Time Limit:0MS     Memory Limit:0KB     64bit IO Format:%lld & %llu  Practice  ...

  3. SQL中对于两个不同的表中的属性取差集except运算

    SQL中对两个集合取差集运算,使用except关键字,语法格式如下: SELECT column_name(s) FROM table_name1 EXCEPT SELECT column_name( ...

  4. socket是什么?(翻译)

    根据stackoverflow的答案: 原文:A socket represents a single connection between two network applications. The ...

  5. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

  6. xampp安装

    软件下载在以下网站 http://www.apachefriends.org/zh_cn/index.html XAMPP 是一个易于安装且包含 MySQL.PHP 和 Perl 的 Apache 发 ...

  7. 关于box-shadow属性的一点心得

    一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...

  8. Java底层实现 - CPU术语

    1.内存屏障(memory barriers)是一组处理器指令,用于实现对内存操作的顺序限制 2.缓冲行(cache line)CPU高速缓存中可以分配的最小存储单位.处理器填写缓存行时 会加载整个缓 ...

  9. CLR:基元类型、引用类型和值类型

    最新更新请访问: http://denghejun.github.io   前言 今天重新看了下关于CLR基元类型的东西,觉得还是有必要将其记录下来,毕竟这是理解CLR成功 之路上的重要一步,希望你也 ...

  10. html和css的联系

    前几天学习了一点html,今天团队为做项目一起学习时,又了解到了新的东西———css,通过组内队员的指导和对一些网站(三翼)的分析,发现了html和css之间联系密切.根据从网上了解的资料,发现htm ...