Reactime Chrome 插件, crx 扩展下载
扩展ID: cgibknllccemdnfhfpmjhffpjfeidjga
A Chrome extension that helps debug React applications by memorizing the state of components with every render.Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020! Reactime is a debugging tool for React developers. It records application state changes as 'snapshots' and allows the user to jump to any previously recorded state. This tool is for React apps using stateful components and prop drilling, and has beta support for Recoil, Context API, conditional state routing, Hooks (useState, useEffect) and functional components. Version 6 enhanced the user experience with new visualizations that better contextualizes state data and component relationships within a target application while fixing various bugs. Time jump can now be accomplished in the History tab by clicking any node. Both the History and Map tabs now feature a dynamic legend making visualizations more expressive and meaningful. The core visualizer in the Map tab has been replaced and now offers various orientations, layouts, and node linkages. The Performance tab now displays snapshots as a stacked bar chart which provides the user a birds eye view of component rendering times as state changes. This latest version incorporates a new onHover functionality across the visualizations wherein a user can hover a component representation (e.g. node in the Map tab or a bar in the pPerformance tab) and its corresponding HTML element will highlight within the DOM. Installation Install the Reactime extension from Chrome Web Store. Alternatively, use src/extension/build/build.zip for manual installation in Developer mode. Turn on 'Allow access to file URLs' in extension details page if testing locally. Note for v3 and prior users: NPM package no longer required. Then open up your Chrome DevTools and navigate to the Reactime tab. Features Recording Whenever state is changed (whenever setState or useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel. Viewing State You can click on a snapshot to view your app's state. State can be visualized in JSON format or a hierarchy tree. Also, snapshots can be diffed with the previous snapshot, which can be viewed under the Diff tab. Viewing Application You can view the entire component hierarchy of the target application in the Map tab Jumping Time-travel allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot or clicking any node in the history tab will change the DOM by setting their state Performance Metrics The new Performance tab displays a stacked bar chart of snapshots to help users visualize and identify potential trends or bottle necks in component rendering time. Each bar has an onHover tooltip for additional information as well as DOM highlighting Additional Features: -recoil data flow visualization -component map visualization -multiple tree graph branches depicting state changes -tree graph hover functionality to view state changes -ability to pan and zoom tree graph -multiple tabs support -a slider to move through snapshots quickly -a play button to move through snapshots automatically -a pause button, which stops recording each snapshot -a lock button to freeze the DOM in place. setState loses functionality when extension is locked -a persist button to keep snapshots upon refresh (handy when changing code and debugging) -export/import the current snapshots in memory -declarative titles in the actions panel -extended support for components with conditional state fields Authors Alex Landeros - @AlexanderLanderos Chris Guizzetti - @guizzettic Jason Victor - @theqwertypusher Sanjay Lavingia - @sanjaylavingia Vincent Nguyen - @VNguyenCode Haejin Jo - @haejinjo Hien Nguyen - @hienqn Jack Crish - @JackC27 Kevin Fey - @kevinfey Carlos Perez - github.com/crperezt Edwin Menendez - github.com/edwinjmenendez Gabriela Jardim Aquino - github.com/aquinojardim Greg Panciera - github.com/gpanciera Nathanael Wa Mwenze - github.com/nmwenz90 Ryan Dang - github.com/rydang Bryan Lee - github.com/mylee1995 Josh Kim - github.com/joshua0308 Sierra Swaby - github.com/starkspark Ruth Anam - github.com/peachiecodes David Chai - github.com/davidchaidev Yujin Kang - github.com/yujinkay Andy Wong - github.com/andywongdev Chris Flannery - github.com/chriswillsflannery Rajeeb Banstola - github.com/rajeebthegreat Prasanna Malla - github.com/prasmalla Rocky Lin - github.com/rocky9413 Abaas Khorrami - github.com/dubalol Ergi Shehu - github.com/Ergi516 Raymond Kwan - github.com/rkwn Joshua Howard - github.com/Joshua-Howard
名称 | Reactime |
插件标识 | cgibknllccemdnfhfpmjhffpjfeidjga |
平台 | Chrome |
评分 | 0 |
评分人数 | 22 |
插件主页 | |
作者 | Reactime |
版本号 | 6.0.1 |
大小 | 1.49 MB |
官网下载次数 | 1000 |
分类 | 查看更多 web开发 分类下的扩展插件 |
下载地址 | |
更新时间 | 2020-11-05 00:00:00 |
CRX扩展文件安装方法
打开Chrome浏览器的扩展程序: 地址栏直接输入:chrome://extensions/ 即可进入,将右上角的【开发者模式】开启,重启chrome(重要操作),再次打开扩展程序管理界面,把下载的crx直接拖动进去即可完成安装,注意请更新最新版本的chrome.
打开Chrome浏览器的扩展程序: 地址栏直接输入:chrome://extensions/ 即可进入,将右上角的【开发者模式】开启,重启chrome(重要操作),再次打开扩展程序管理界面,把下载的crx直接拖动进去即可完成安装,注意请更新最新版本的chrome.
回复
强烈推荐
相关推荐
大家在找这些插件
- 视频号
- ug
- Supercopy
- insgram
- acg
- 视频会员
- HPOI
- avtar
- acr
- Kimi
- antibot
- chandler
- 1passward
- Flash Copilot
- 黑暗模式-护眼
- 蓉城
- 税号
- Pornhub 视频免费下载器 Chrome 插件_DESKTOP
- 黑暗模式-夜眼
- hare
- ai渲染
- 超市投标书
- luccascovo.com
- commercialera.com
- wechatneedweb
- 多线程下载管理插件
- 多线程下载插件
- asciidoctor.js
- 标签页冻结
- uipx-chrome-plugin-master
- Koala Inspector
- palinsestotv.com
- magyargifts.com
- 秘密阅读助手
- 媒体流
- docs online viewer
- NTKO WEB chrome
- kimi阅读助手
- ungerboeck
- bookmark preview
- easy scraper
- been choice
- css pr
- popchatgpt
- zeroomega
- openh246
- bookmark preview - productivity and extensio
- kimi网页总结助手
- ai文生视频
- canvasblocker
- fuzz
- bookmark preview - productivity and extension
- rss feed reader
- free ???vp
- right-click image saver free
- notion web clipper
- speed conctroll
- baiduexport
- transkriptor
- ttpheader
- cog system view
- ublock origin 1.54.0
- troywell
- kimi copilot
- ai文字生视频
- asciidoctor.js live preview download chrome
- link preview sidebar
- asciidoctor.js live preview
- tinamind
- 视频网页全屏
- 跳墙
- trancyt
- 文章总结
- mpi-corporation.com
- Pornhub è§é¢å è´¹ä¸è½½å¨ Chrome æ件
- 安全协议
- Kimi网页总结助手
- Kimi阅读助手
- elmo
- Easy Scraper
- mega303bet.jimdosite.com
- megapari2023com.jimdosite.com
- chart gpt
- infinity标签页
- enblecopy
- hala
- Right-click Image Saver Free
- COG SYSTEM VIEW
- COG
- dynamics power pane
- dynamics crm
- 复制文字
- 网页 复制
- Kimi Copilot
- UBlock
- vvload
- Persepolis
- 视频限制