npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@webank/wt-console

v1.4.2

Published

A lightweight, extendable debug tool for React Native

Downloads

21

Readme

wt-console

Open Source Love JavaScript Style Guide

注:从WeTrident项目提炼而来。

📥 安装

  • npm i @webank/wt-console --save
  • yarn add @webank/wt-console

💡 背景

App开发过程中,经常会遇到一个场景就是,测试说我遇到一个xxx问题,但是不能复现,之前比较多的解决方案是基于文件日志。我们自己使用过程中发现文件日志太重,而且测试同学取日志的学习成本太高。于是在web项目中开始使用类似vConsole这一类的工具,又因为我们主要使用到的日志查看和日志上传功能。因此我们在React Native实现了类似vConsole的功能,同时在陆续扩展一些功能。

🌱 特性

  1. 添加一行代码即可在App内查看日志。
  2. 支持展示Network信息(目前支持fetch api的展示)。
  3. 收拢警告和错误提示,跟RN内烦人的底部黄色警告条说再见。

📱 截图

📗 用法说明

正式使用之前可以先使用snack版本体验,在线示例: https://snack.expo.io/@erichua23/wt-console-demo

基础用法

TianYan嵌入到App最外层View中:

import TianYan from '@webank/wt-console'

export default class SimpleApp extends Component {
  render () {
    return (
      <View style={styles.container}>
        {/* other view */}

        {/* 添加下面一行代码即完成接入 */}
        <TianYan />

      </View>
    )
  }
}

进阶用法

Console插件

默认会展示Console板块,内容类型Chrome中的Console板块。

Console插件支持三个参数:

  • showTimestamp 是否在日志前面展示时间戳。布尔类型,默认为false
  • ignoreRedBox 是否忽略RN对console.error默认的处理(默认会展示红屏)。布尔类型,默认为false
  • ignoreYellowBox 是否忽略RN对console.warn默认的处理(默认会在底部展示小黄条)。布尔类型,默认为false
<TianYan
  consoleOptions={{
    showTimestamp: true, // 展示日志时间戳
    ignoreRedBox: true, // 隐藏默认红屏
    ignoreYellowBox: true // 隐藏默认小黄条
  }}
/>

注:

  • 为什么引入ignoreRedBoxignoreYellowBox:因为RN对警告的处理比较暴力,直接使用浮窗在底部拦截操作,遇到警告比较多的时候非常烦人。官方提供的了ignore的方式,但是用官方的ignore,又担心某些需要关心的警告被忽略。wt-console采用了折中的策略,将黄色警告条去除后都收拢到wt-console的图标上展示,出现warning的时候开发者可以自有选择当前是否需要继续查看warning的详细信息。如下代码将错误和警告都收拢到wt-console统一管理。

Network插件

默认会展示Network板块,展示应用中的网络请求信息。同时支持一键重发指定请求。

开发调试

// 使用react-native-web进行演示
cd react-native-web-demo
npm i
npm run syncLib // 将 library 同步到 react-native-web-demo/src/ 下面
npm start // 将自动在浏览器打开

❤️ 我们的其他项目

🤝 类似项目

  • web-console:H5-based mobile web debugging tool similar to chrome devtools.
  • vConsole:A lightweight, extendable front-end developer tool for mobile web page.