Angular浏览器插件Batarang介绍及使用

Angular浏览器插件Batarang介绍

对于Angular新手来说，刚接手Angular的时候都会比较痛苦。确实，相对于JQuery、Backbone等，Angular门槛确实相对较高，而且比较难以调试。今天给大家带来一个Angular Chrome 插件Batarang的介绍，运用好改插件，会帮助加深对Angular的理解。

准备工作

安装Batarang：

  1. 方法一：在Chrome应用商店中查找Batarang，并安装。
  2. 方法二：在网上查找Batarang的安装包，直接在Chrome浏览器中安装。

使用

在已安装的Batarang插件的浏览器中打开一个Angular应用，并打开控制台，如下图：

会发现控制台中多了一个AngularJS的页面，勾选“Enable”，该控件就可以使用了：

Models

点开Models，如下图，左侧是该应用下的所有Scope的信息，右侧是Scope对应的模型信息。点击某个作用域，右侧相应的会显示出该作用域中的所有模型信息。

点击Scope前的”<”，会跳到Elements中该作用域所在的DOM标签上。

Performance

Performace展示的是该应用的性能，左侧显示的是监控树，右侧显示的是监控表达式的性能，这个页面能帮助我们进行性能优化。

Dependenices

Dependenices展示的指令和服务之间的依赖关系，选定某个指令，可以看到其依赖的服务。

Options

最后是options页面。有三个选项：”show applications,” “show scopes,” 和 “show bindings.”。每个选项勾选时，在debugger时，相应的内容会在页面高亮。


help

如有任何问题，请查看help

Element

其实我最常用的应该是Element右侧的AngularJS Properties标签。在Element标签中选定某个标签时，Element页面的右侧的内容，会多一个AngularJS Properties页面，该页面显示的是选定的html内容的作用域的属性，该功能对于对Angular Scope的理解非常有用。如果不是很理解Angular Scope，可以多用一个这个功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular浏览器插件Batarang介绍及使用

    Angular浏览器插件Batarang介绍 对于Angular新手来说,刚接手Angular的时候都会比较痛苦.确实,相对于JQuery.Backbone等,Angular门槛确实相对较高,而且比较难以调试.今天给大家带来一个Angular Chrome 插件Batarang的介绍,运用好改插件,会帮助加深对Angular的理解. 准备工作 安装Batarang: 方法一:在Chrome应用商店中查找Batarang,并安装. 方法二:在网上查找Batarang的安装包,直接在Chrome浏览

  • 关于angular浏览器兼容性问题的解决方案

    edge浏览器下,固定列的边框消失 问题 :edge浏览器下,固定列的边框消失 原因 :ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webkit-sticky !important; position: sticky !important; 谷歌.火狐及-webkit-内核的浏览器均支持该属性(css3),IE不支持该属性,所以在IE中,会自动降级,表格无固定列,可滑动的形式. Edge浏览器在17

  • 10 款珍藏已久的 Chrome 浏览器插件(程序员必装)

    10 款珍藏已久的 Chrome 浏览器插件(程序员必装)

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览器,我想那就试试吧,期初我觉得用起来很别扭,毕竟我不是一个"喜新厌旧"的人.但用的次数越来越多,也就习惯了. Chrome 浏览器有一个好处,就是插件极其丰富,只有你想不到的,没有你找不到的,这恐怕是 Chrome 浏览器被众多爱好者钟爱的原因吧.当然了,Chrome 浏览器本身也非常强大

  • vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件

    vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件

    当前最新版本:vue-devtools 6.0.0-beta.7 用这个版本主要是为了支持vue3 推荐直接下载 https://www.crx4chrome.com/crx/107268/ 本地下载地址 自行构建 https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.6 安装 安装依赖(这里用npm比较快,记得用淘宝源) npm install --global windows-build-tools 等等等.......

  • javascript学习笔记(十七) 检测浏览器插件代码

    复制代码 代码如下: //检测非IE浏览器插件函数 function hasPlugin(name) { name = name.toLowerCase(); for (var i=0 ; i < navigator.plugins.length ; i++ ) { if (navigator.plugins[i].name.toLowerCase().indexOf(name) >-1) { return true; } } return false; } //检测IE浏览器插件函数 fun

  • 用VueJS写一个Chrome浏览器插件的实现方法

    浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码.你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情. 常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单. 程序目录结构 最简单的扩展程序只需要3个文件,或者

  • linux系统下vim插件安装介绍

    linux系统下vim插件安装介绍

    目录 安装vim插件管理器 添加插件演示 删除插件: 安装vim插件管理器 第一次使用插件推荐安装插件管理器,它可以简化我们安装插件的步骤. 1.下载 plug.vim 文件,根据操作系统不同,放置在以下autoload目录中: Linux: ~/.vim/autoload Windows: ~\vimfiles\autoload\plug.vim plug.vim地址:https://raw.githubusercontent.com/junegunn/vim-plug/master/plug

  • maven三个常用的插件使用介绍

    目录 背景 SpringBoot 打包时排除文件 Spring 打包本地依赖 jar 编译时排除指定文件 复制粘贴的原则 总结 背景 maven 常用的三个插件对打包有不同的作用: maven-jar-plugin:处理 jar 包生成: spring-boot-maven-plugin:SpringBoot 项目打包: maven-assembly-plugin:自定义打包结构. 而实际开发过程中这三个插件可能都综合使用,本文类介绍混合使用这些插件时需要注意的事项. SpringBoot 打包

  • 超级实用的几款浏览器插件,打开丰富资源大门

    超级实用的几款浏览器插件,打开丰富资源大门

    目录 一.CSDN浏览器助手 二.ADB(拦广告) 三.Simple Allow Copy(无障碍复制网页文字) 四.DARK READER(夜间模式) 五.Screen Recorder(视频录制) 六.global speed(视频倍速播放) 补充:插件的下载和安装 一.CSDN浏览器助手 你们的谷歌浏览器打开是不是这个样子的? 而我的谷歌浏览器打开的界面是这样的: 这是因为我安装了CSDN浏览器助手这个插件,然后修改了壁纸,这个壁纸是我自己弄的,如果喜欢的话私信我拿原图,当然你也可以去网上

  • Visual Studio Code 从简介、安装到配置所需插件详细介绍

    提到visualstudiocode,想必你也听说过visualstudio(vs) 那就从查阅过的资料大致总结以下几点,关于这两个产品的区别: 首先总的来看,它们都是微软公司的产品 名字不一样当然会有不一样的用法或者解释 区别: ①先来介绍vs,它是微软公司开发发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码管控工具.集成开发环境(IDE)等.通俗的讲,是一款编译器. 而vscode是微软公司的一个项目,是针对于编写现代web和云应

随机推荐