在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. webrtc的音频处理模块apm( audio processing)下载与编译出libwebrtc_audio_preprocessing.so

    webrtc代码在android和chromium项目中都有.但是android中的那个带有Android.mk,稍微修改下就能用ndk-build编译出libwebrtc_audio_preproc ...

  2. shell example01

    条件判断 if [[ -e ${1} ]]; then echo "$(tput setaf 2) found ${1} $(tput sgr0)" cat ${1} else e ...

  3. Bug整理——$(window).height()获取到$(document).height()的问题

    想看解决方案不想看无聊乏味的bug解决过程的同学,请直接跳转到页面底部~ 今天在做项目的过程中遇到了一个BUG,项目中需要获取到浏览器客户区的高度以方便做一些适应性调整,代码如下: $(documen ...

  4. Ubuntu14.10下安装JDK 8

    方法一1、下载 JDK 8http://www.oracle.com/technetwork/java/javasebusiness/downloads/此处由于我的系统是Ubuntu14.10 64 ...

  5. 李洪强iOS经典面试题143-绘图与动画

    李洪强iOS经典面试题143-绘图与动画   绘图与动画 CAAnimation的层级结构 CAPropertyAnimation是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使 ...

  6. 【Alpha】Daily Scrum Meeting第八次

    一.本次Daily Scrum Meeting主要内容 抓紧冲刺(接下去两天都在下午增加一个小会议) 剩余任务的概况 二.项目进展 学号尾数 今日已完成任务 接下去要做 502 无 将数据库的数据转换 ...

  7. HTLM5表单

    1.HTML5占位符文本   使用placeholder可以给文本框,搜索框添加提示性文本 <input type="text" name="url" p ...

  8. sql表别名

    表名.列明后面接as xx,xx就是表/列的别名,as可省略 别名通常有两个作用 as可省略,as可省略

  9. 奥迪--A3

    -型号:A3 -价格:18-28W -动力:1.4T/1.8T -变速箱:7挡双离合 -长宽高:4.32,1.79,1.43(Limousine:4.46,1.80,1.42) -油箱:50L -发动 ...

  10. sublime 添加代码片段(snippets)

    1.工具-新代码片段(Tools -> New Snippet) 2. <snippet> <content><![CDATA[ if(\$rs && ...