位置: 编程技术 - 正文

使用Chrome浏览器调试AngularJS应用的方法(使用chrome浏览器打开)

编辑:rootadmin

推荐整理分享使用Chrome浏览器调试AngularJS应用的方法(使用chrome浏览器打开),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何使用Chrome浏览器,使用chrome浏览器观看,使用chrome浏览器提示需要chrome,使用chrome浏览器打不开网页,如何使用Chrome浏览器,使用chrome浏览器观看,使用chrome浏览器打不开网页,如何使用Chrome浏览器,内容如对您有帮助,希望把文章链接给更多的朋友!

当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难。下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用:1: 访问作用域

通过一行简单的JS程序访问页面中任何作用域(甚至是隔离的作用域!):

对于隔离作用域:

这里用`targetNode`作为HTML节点的引用。你可以非常轻松的通过`document.querySelector()`来创建一个`targetNode`

2:查看作用域树

有些时候,我们需要查看页面中作用域层次来有效的调试我们的应用。AngularJS Batarang正是我们需要的一款Chrome浏览器的扩展,可以展示当前作用域层次,并具有其他非常有用的特性。

3: 抓取任何服务

使用Chrome浏览器调试AngularJS应用的方法(使用chrome浏览器打开)

无论ngApp在哪里定义,我们都可以使用注入器功能来抓取任何的服务的引用(如果使用angular的bootstrap方法,则可以手动抓取$rootElement):

然后我们就可以对该服务进行调用,就像我们可以将服务注入一样。

4: 访问控制器使用指令

一些指令定义了一个拥有某些额外(通常是分享)功能的控制器。为了从控制台访问一个给定指令的控制器实例,只需使用 controller() 方法:

最后一种做法更高级并且不常用。5: Chrome 控制台特性

Chrome浏览器的控制台有一堆不错的捷径 来调试浏览器应用。这是一些Angular开发中最好的做法:

$0-$4: 访问最近在查看窗口中进行选取的 5 个DOM元素。选择抓取的范围非常方便。 $(selector)和$$(selector): 分别是querySelector() 和 querySelectorAll的一个快速的替代

感谢 @zgohr 提供这种方法!

结论

通过几个简单的技巧,我们可以访问页面任何作用域中的数据,查看作用域层次结构,注入服务和控制指令。

所以下一次,如果你想稍微进行调整,检查自己的工作或者通过控制台控制AngularJS一个用,我希望你能记住这些命令,并且能做到像我一样觉得他们非常实用!

使用AngularJS创建自定义的过滤器的方法 Angularjs过滤器是angularjs非常棒的特性之一。有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文。下面显示的是自定义过滤器长什

使用AngularJS编写较为优美的JavaScript代码指南 本文示例代码下载:modulePattern.zip-所有的4个HTML文件以及panacea.js-1.6KB介绍AngularJS的库里面有很多东西,但本文中我只想专注于小的,针对特定主题的库

详细解读AngularJS中的表单验证编程 需求Name必填Username非必填,最小长度3,最大长度8Email非必填,但必须是合法的email验证未通过的表单不能提交显示一个必填或者非法email格式的错误信息

标签: 使用chrome浏览器打开

本文链接地址:https://www.jiuchutong.com/biancheng/380434.html 转载请保留说明!

上一篇:深入讲解AngularJS中的自定义指令的使用(深入讲解MACD:MACD红绿柱)

下一篇:使用AngularJS创建自定义的过滤器的方法(angular创建service)

  • 什么叫差额征税呢
  • 长期待摊费用借贷方向表示什么
  • 发票的规格和型号有哪些
  • 固定资产明细账需要每年更换吗
  • 处置使用过的固定资产,税率按多少
  • 开专票都需要什么资料
  • 网上支付的三种类型
  • 科技研发政策
  • 发票密码区出格了怎么调整
  • 总分类账户和明细分类账户平行登记的内容可以概括为
  • 股权转让的标的
  • 新准则 预提费用
  • 不应该计入管理费用的
  • 小规模建筑工程
  • 金蝶界面设置
  • 零售金银首饰消费税税率是多少
  • 收到对方公司的货款怎么记账
  • 进项税额加计抵减怎么做分录
  • linux系统怎么安装网卡驱动
  • 扣缴义务人申报和综合所得年度自行申报
  • 增值税明细账怎么登记
  • 车辆购置税如何计算器
  • vbs win10
  • bios里头没有usb功能怎办
  • 线程是什么意思
  • win7为什么没有本地连接
  • 应付股利的会计科目
  • checkingmedia什么意思戴尔笔记本
  • 马哈拉施特拉邦人口
  • 空调移机人工费多少钱
  • 纳税人临时到外省从事经营活动
  • laravel使用
  • laravel创建项目
  • php操作mysql数据库
  • 提取备用金记账凭证图片
  • 研发和技术服务税率由6%变为3%
  • php str
  • php连接mysql8.0
  • dedecms主页修改
  • 已抵扣发票在什么地方查
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 先销售后开发票的如何做帐?
  • 营业利润是负数什么原因
  • 本月开红字发票如何报税?
  • 固定资产净值如何处理
  • 广告公司制作警车违法吗
  • 进项税额可以抵扣会计分录
  • 生产用品采购怎么购买的
  • 产品成本的具体内容
  • 免抵退退税额
  • 预计所有者权益增长率
  • 固定资产成本包括什么
  • Linux下mysql源码安装笔记
  • Windows2008 对决 Windows Vista优势
  • ubuntu安装超详细教程
  • linux服务端
  • ubuntu 11
  • mac死机按什么都没用
  • win8.1无法安装
  • smss.exe是干嘛的
  • win7应用程序没反应
  • navapp.exe - navapp是什么进程文件 作用是什么
  • pcn是什么软件
  • 如何解决win7系统不稳定
  • linux chakan
  • 运行javascript
  • css中的auto
  • Python scikit-learn 做线性回归的示例代码
  • opengl api version
  • python多线程操作
  • 开发流程和步骤
  • 小助手是什么软件
  • if条件程序
  • AutoPainting
  • 我置顶你也只顶你
  • 工具类软件有哪些
  • js选择框全选
  • 企业所得税要在几号之前申报
  • 江苏钢厂排名前十
  • 2019年十堰市高中录取分数线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设