[转]调试AngularJS应用

原文链接：Debugging AngularJS Apps from the Console

　　当我们开发AngularJS应用的时候，我们想在Chrome/FF/IE控制台调试隐藏在应用中的数据和服务的很困难的，下面是一些小技巧，可以来检测和监控正在运行的应用程序，这使我们开发、调试、修改angular应用变的较为容易。

1.Access Scopes
我们可以访问任何作用域（甚至一个独立作用域），在页面使用单行JS即可实现：

`1`	`> angular.element(targetNode).scope()`

`2`	`-> ChildScope {$id:` `"005",` `this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}`

或者一个隔离的作用域：

`1`	`> angular.element(targetNode).isolateScope()`

`2`	`-> Scope {$id:` `"009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}`

其中targetNode是节点Dom对象，可以使用document.getElementById(),document.querySelector()等来获取。如果你不知道querySelector方法如何使用及兼容性问题，请戳这里。

2.Inspect the Scope Tree
可以使用Chrome的AngularJS BataRang插件。

3.Grab any Services
可以通过注入服务的ngApp，或者.ng-scope类名来调用：

`1`	`> angular.element(document.querySelector('html')).injector().get('MyService')`

`2`	`-> Object {undo:` `function, redo:` `function, _pushAction:` `function, newDocument:` `function, init:` `function…}`

`3`	`// Or slightly more generic`

`4`	`> angular.element(document.querySelector('.ng-scope')).injector().get('MyService')`

这是我们就可以调用服务的方法了，就想我们注入了服务，我们可以调用服务的方法一样。

4.Access controller for directive
Some directives define a controller with certain additional (often shared) functionality. To access the instance of a controller for a given directive from the console, just use the controller() function:
在我们定义的时候，会把一些公共的功能放到控制器中，为了访问控制器的实例，我们只要使用controller()方法就可以：

`1`	`> angular.element('my-pages').controller()`

`2`	`-> Constructor {}`

5.Chrome Console Features
Chrome我们提供一些好的快捷方式，在控制台中debug 我们的浏览器应用，在AngularJS开发中，下面有些最好的方式：
a)$0 – $4: Access the last 5 DOM elements selected in the inspector window. This is convenient for grabbing scopes for selected elements: angular.element($0).scope()

b)$(selector) and $$(selector): A quick replacement for querySelector() and querySelectorAll, respectively.

[转]调试AngularJS应用相关推荐

Chrome调试angularJS出现Uncaught SyntaxError: Unexpected identifier
转:http://blog.csdn.net/yiluoak_47/article/details/7663952 chrome下运行编写的javascript代码时,在工具javascript控制台 ...
前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
AngularJs 实战 -慕课网
https://www.codecademy.com/en/courses/learn-angularjs/lessons/your-first-app/exercises/your-first-ap ...
angularjs pdf插件_AngularJS权威教程 PDF扫描版[14MB]
AngularJS权威教程是学习AngularJS的公认经典,内容全面,讲解通俗,适合各层次的学习者.作者拥有丰富的AngularJS开发和教学经验,也是一位全栈工程师.全书35章,由浅入深地讲解了A ...
angularjs pdf插件_AngularJS高级编程中文pdf扫描版[107MB] 附源码
用AngularJS编写高级应用的完整指南这是一个令Web开发人员激动的时代,掌握JavaScript语言技能的人才变得炙手可热.AngularJS迅速蜕变为领先的新一代客户端Web框架:可供个人. ...
前端开发环境与最佳实践
目标 ========================= 标准化.自动化.最优化----以WEB设计取代传统桌面程序界面设计开发语言:javascript ===================== ...
JavaScript开发工具大全 1
译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采 ...
AngularJS学习笔记之二：开发、调试和测试工具
2019独角兽企业重金招聘Python工程师标准>>> 一.搭建自动化的前端开发.调试和测试环境我们先来看一个完整的项目实例,这是AngularJS官方为我们提供的Phonecat ...
基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

[转]调试AngularJS应用

[转]调试AngularJS应用相关推荐

最新文章

热门文章