Coder Social home page Coder Social logo

alloyteam / alloylever Goto Github PK

View Code? Open in Web Editor NEW
1.4K 54.0 168.0 652 KB

1kb js library contains development debugging, error monitoring and reporting, user problem localization features - 1KB代码搞定开发调试发布,错误监控上报,用户问题定位

Home Page: https://alloyteam.github.io/AlloyLever/

License: MIT License

JavaScript 100.00%
vconsole alloylever badjs error

alloylever's Introduction

中文 | English

AlloyLever

1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位。

  • 支持错误监控和上报
  • 支持 vConsole错误展示
  • 支持开发阶段使用 vConsole
  • 支持生产环境机关拉取 vConsole
  • 支持预埋机关唤起
  • 支持url带参数唤起

url带参数唤起有两个目的,第一是方便网站开发过程中显示vConsole面板,第二是发给投诉反馈网站错误的用户显示vConsole面板用于定位错误。

安装

npm install alloylever

CDN地址下载下来使用:

https://unpkg.com/alloylever

使用指南

AlloyLever.config({
    cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',  //vconsole的CDN地址
    reportUrl: "//a.qq.com",  //错误上报地址
    reportPrefix: 'qun',    //错误上报msg前缀,一般用于标识业务类型
    reportKey: 'msg',        //错误上报msg前缀的key,用户上报系统接收存储msg
    otherReport: {              //需要上报的其他信息
        uin: 491862102
    },
    entry:"#entry"          //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
})

AlloyLever会监听window.onerror并把错误信息保存下来,并且上报到reportUrl,你也可以召唤到vConsole并显示出来错误和相关日志。 或者使用这个CDN也可以://pub.idqqimg.com/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js

url唤起vConsole

只要你的页面引用了AlloyLever,你只需要在你的url里带上 vconsole=show 就能显示vConsole面板。如:

//加载并显示log面板
http://localhost:63342/AlloyLever/index.html?vconsole=show
//加载但不显示log面板
http://localhost:63342/AlloyLever/index.html?vconsole=hide
//不加载vConsole脚本
http://localhost:63342/AlloyLever/index.html

这些url的作用很好理解:

  • 开发阶段用于调试
  • 发给投诉的用户打开带有vconsole=show的url

在线演示

QQ交流群491862102

English | 中文

AlloyLever

1kb(gzip) js library contains development debugging, error monitoring and reporting, user problem localization features.

  • support error monitoring and reporting
  • support for vConsole error display
  • support the development phase by using vConsole
  • support the production environment authorities to pull vConsole
  • support DOM evokes vConsole
  • supports url evokes vConsole

There are two purposes for URL parameter arousal, the first is to display the vConsole panel during the website development process, and the second is to send a complaint to the feedback site. The wrong user displays the vConsole panel for locating errors.

Install

npm install alloylever

or get it from cdn:

https://unpkg.com/alloylever

Usage

AlloyLever.config({
    cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',  //vconsole CDN address
    reportUrl: "//a.qq.com",  //Error reporting address
    reportPrefix: 'qun',    //An error reporting msg prefix is generally used to differentiate business types
    reportKey: 'msg',        //Error reporting msg prefix key, user reporting system receives storage msg
    otherReport: {              //Other information to be reported
        uin: 491862102
    },
    entry:"#entry"          //Please click on this DOM element to summon vConsole 6 times. You can use AlloyLever.entry('#entry2') add more entry
})

AlloyLever will listen to window.onerror and save the error information, and report to reportUrl, you can also call vConsole and display errors and related logs.

URL evokes vConsole

As long as your page references AlloyLever, you simply display the vConsole panel with the vconsole=show in your url. Such as:

//load and display the log panel
http://localhost:63342/AlloyLever/index.html?vconsole=show
//load but don't display the log panel
http://localhost:63342/AlloyLever/index.html?vconsole=hide
//don't load vConsole
http://localhost:63342/AlloyLever/index.html

The role of these URL is well understood:

  • development phase for debugging
  • open the URL with vconsole=show to the user who has complained

DEMO

License

This content is released under the MIT License.

alloylever's People

Contributors

bryant1410 avatar dntzhang avatar lukasdrgon avatar mirreal avatar southill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

alloylever's Issues

Error: Uncaught InvalidStateError

使用F5自动刷新工具起本地服务,页面加载的时候就会出现下面的报错,换另外的本地服务,xhr请求的时候会报下面的错,请问是什么原因导致的?

Error: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. Script: http://192.168.172.126/alloy_lever.js Line: 2950 Column: 24 StackTrace: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

config中的vconsole地址配置不生效

/*!
 *  AlloyLever v1.0.2 By dntzhang
 *  Github: https://github.com/AlloyTeam/AlloyLever
 *  MIT Licensed.
 */

想使用vconsole的3.x版本,虽然配置了cdn,但加载时还是使用的默认的
s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js 地址,配置未生效

image

代码洁癖

代码写的很漂亮,但是作为一个喷子,不喷点啥老是不自在

87行 entry =document.querySelector(selector) 加个空格可好 entry = document.querySelector(selector)

205行 至最后,空格统一一下看起来舒服一些,不然好难受啊。哈哈哈哈

文件引用位置:Cannot read properties 'querySelectorAll' of null 解决办法

非常感谢大神提供的调试工具。

按照说明,将script文件放置最开始位置,如下代码:

image

此时会提示如下错误:

image

该问题为当前页面元素没有加载导致。

需要调整文件引入位置,放置在body结束标签后引入的js文件中即可。如下:

image

希望能够帮到新手朋友们。^_^

Powered By Nuclear 能去掉吗?

每次点击AlloyLever 想看调试输出 都会碰到Powered按钮跳转到 github。太影响体验了

要不把链接去掉 要不直接隐藏掉吧

不能在head里面引入,和KISSY冲突

发现两个问题:
1、alloy_lever.js不能放到head里面引入,否则会有“TypeError: Cannot read property 'querySelectorAll' of null(…)”的错误提示;
image
会执行这里的语句

2、alloy_lever.js会被淘宝的KISSY影响,导致页面会有报错,可能是先载入了KISSY的文件,但是系统之前的架构里面有些js是放到里面的;
image

只用alloyLever能触发window.onerror事件,但引入了Vconsole之后触发不了

这是只引入alloylever的情况,url上没有带vconsole
c1d28761-7c4c-4623-b633-85ed355c3213
url带上vconsole之后
12ae6fab-ceda-412e-b50b-caab89609067
看了源码,没看出什么问题,请帮忙解决

看了一下是vconsole的问题,他里面重写了window.onerror方法

f.isFunction(window.onerror) && (this.windowOnError = window.onerror), window.onerror = function (t, o, n, a, i) {
                            var r = t;
                            o && (r += "\n" + o.replace(location.origin, "")), (n || a) && (r += ":" + n + ":" + a), e.printLog({
                                logType: "error",
                                logs: [r],
                                noOrigin: !0
                            }), f.isFunction(e.windowOnError) && e.windowOnError.call(window, t, o, n, a, i)
                        }

Uploading B7F6C832-CA6D-44CF-B66C-23B7B0EED3BC.png…

这是编译后的代码,又把e.windowOnError置为null,所以导致之前定义的window.onerror执行失败,
vconsole的下载地址是

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.