zoukankan      html  css  js  c++  java
  • [转]调试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插件。
    angular-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.

  • 相关阅读:
    微服务实战(二):使用API Gateway
    微服务实战(一):微服务架构的优势与不足
    在WIN7、WIN10操作系统用WebDAV映射网络驱动器需要的操作
    docker开机启动和docker-compose开机启动执行相应的各个docker容器
    /etc/rc.d/init.d自启动程序说明
    C# 通过反射实现对象映射:将2个属性相近的对象相互转换
    添加windows右键菜单:使用exe应用程序打开文件/文件夹
    .NET5 MVC Program.cs 笔记
    前端 JS 正则表达式积累
    VS Code 快捷键
  • 原文地址:https://www.cnblogs.com/dajianshi/p/4500025.html
Copyright © 2011-2022 走看看