当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

inspector

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 庾君博
操作系统 跨平台
开源组织
适用人群 未知
 软件概览


An angular library that lets you inspect and change Angular 9+ component properties

Features

  • Inspect Angular 9+ components on the fly
  • Change component properties without touching the code
  • Simulate Angular events
  • See the results in realtime

Table of Contents

Installation

This library supports Angular 9+ projects and should only be installed using Angular CLI.

Angular CLI

ng add @ngneat/inspector

Above command will do following for you:

  1. Add and install following dev dependencies:
    1. @ngneat/inspector
    2. ace-builds
    3. tinykeys
  2. Import environments from ../environments/environment.ts in projects root module. This can be skipped with --skipImport.
  3. Import InspectorModule from @ngneat/inspector in your project's root module's imports section. This can be skipped with --skipImport.

�� Please note: @ngneat/inspector is a debugging tool and it helps you to develop faster. So, it shouldn't be part of your production deployment. When you install it using ng add @ngneat/inspector it is already taken care for you, as it writes import statement like this: imports: [environment.production ? [] : InspectorModule.forRoot()]

Usage

  1. Click on Inspector button
  2. Then hover over the component which you want to inspect, you will see purple colored outline on the currently hovered element
  3. Click on the element and inspector will expand with component's details like name, selector, properties (with inputs), and outputs (if any)
  4. You can change the property/outputs from select
  5. Data types: Below are the supported data types and how it will render in inspector:
    1. String - input[type=text]
    2. Number - input[type=text]
    3. Boolean - input[type=checkbox]
    4. Object - ace-editor
  6. Properties - To update any property, after updating value, you will need to click on Update button to see the effect
  7. Outputs
    1. To call the output, you will need to click on Emit button.
    2. By default, 1 argument with string type will be shown. You can change the type by change value from type select.
    3. You can also add/remove arguments by clicking on respective buttons

Options

When you ran ng add @ngneat/inspector, it added below statement in your imports array:

imports: [environment.production ? [] : InspectorModule.forRoot()]

Now, you can pass below config options to change inspector behavior in the .forRoot() method, like: InspectorModule.forRoot({ zIndex: 100000000 }).

All the options are optional.:

Option Type Description
enabled boolean Enable or disable the inspector
Default value: true
zIndex number Gives the CSS z-index to inspector host element. Useful in-case it's not visible by default.
Default value: 100000000
outline InspectorConfigOutline
{
    color?: string;
    width?: string;
    style?: string;
}
Applies style to outline, when you're hovering over elements after starting inspector.
Default value:
{
    color: '#ad1fe3',
    width: '2px',
    style: 'solid'
}
position InspectorConfigPosition
{
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
}
Applies CSS Style position co-ordinates to inspector host element. Please note inspector host element has position: fixed for better usability.
Default value:
{
    top: '20px',
    right: '20px'
}
keyCombo string Key combination pattern to start, stop and restart inspecting. Based on tinykeys keybinding syntax. You can disable this by setting enableKeyCombo to false.
Default value: Shift+I
closeOnEsc boolean Close/Stop inspector when escape key is pressed.
Default value: true
enableKeyCombo boolean Enable keyboard shortcut to open inspector. You can change the keybindings using keyCombo options.
Default value: true
hideNonSupportedProps boolean This hides non-supported types from selector. Only string, number, boolean and object are supported as of now.
Default value: true
filterProps RegExp A regular expression to filter out properties.
Default value: /(^__)\w*/g

Contributors

Thanks goes to these wonderful people (emoji key):


Dharmen Shah

�� �� �� ��

Netanel Basal

�� �� �� �� ��‍��

This project follows the all-contributors specification. Contributions of any kind welcome!


Icons made by Freepik from www.flaticon.com

  • Select Elements——选择元素,在设备映射界面选择元素后,最右边会出现选中元素的对应信息,如果发现有些按钮无法选择,可以在中间的App Sources中打开所有下拉框,找到对应的按钮<android.widget.Buttonresource-id="com.tencent.mm:id/fam">,右侧会显示所选元素的信息(看起来比直接在页面点选出现的信息更详细) Swipe by C

 相关资料
  • Stability: 1 - Experimental The inspector module provides an API for interacting with the V8 inspector. It can be accessed using: const inspector = require('inspector'); inspector.open([port[, host[,

  • 完整页签如下图: Inspectors 页签允许你用多种不同格式查看每个请求和响应的内容。JPG 格式使用 ImageView 就可以看到图片,HTML/JS/CSS 使用 TextView 可以看到响应的内容。 Inspectors 页签分为上下两部分,上部显示的是发出的请求相关信息,下部显示的是接收的响应相关信息。 请求 (Request) 部分详解 Headers —— 显示客户端发送到服务

  • 问题内容: 有谁知道这是否可能?大部分用于节点检查器的示例似乎都旨在调试调用的网页。我希望能够调试茉莉花节点测试。 问题答案: 我最终写了一个名为toggle的工具: 您可以将其放入单元测试中,例如: 然后运行测试,例如:node –debug myfile.js debug。如果运行调试切换,则将一直等到ctrl-c以外的任何内容。Ctrl- c退出。您也可以重新运行,这很好。 w0000t。

  • 无法从Mac PC上android设备的appium inspector检查元素。 Mac:10.13 Appium:1.7.2 Appium Inspector:1.5.3 Android设备模拟器:Pixel-2 Android版本:8.0 我可以为同一应用程序检查iOS(iPhone设备)的元素,但无法在android中检查元素。 当我点击appium dmg 1.5.3的inspect图标

  • 启动Appium服务器后,当我单击Appium中的inspector图标时,它会打开模拟器,然后出现我的应用程序页面,然后自动关闭。每次我点击Inspector图标,iphone模拟器就会加载 我下载了2-3个不同的测试应用程序,它们运行良好,Appium inspector也运行良好。

  • > 我已经在mac机器上安装了appium 1.3.7版本。 我已经在android设备上启动了针对android应用的appium server。 在android设备中,该应用程序已成功安装并打开。 我点击了ShowInspector按钮,然后我可以看到inspector屏幕,然后我的appium inspector崩溃了。

  • 我正在Mac Os中使用Appium inspector检查iOS应用程序上的元素。 当我用ios软件包详细信息启动Appium检查器时,我无法使用appium启动ios应用程序,并获得以下错误:- 使用的工具版本如下所示:- 错误日志:-

  • 设备:Android 应用程序:react原生混合应用程序 null