写了几篇前端监控的文章,感觉泛泛而谈,因为刚开始的布局太广,反而不能够分析出数据的价值。所以把代码重构了一下,借鉴了听云和Sentry的某些功能需求,针对某类数据进行详细的分析,以求达到有价值的分析结果,与大家共勉。

本文是从简书复制的, markdown语法可能有些出入,
想看”正版”和更多内容请关注 简书:
小贤笔记

什么是有序列表?

=====================================================================

一般情况下, 我们把 line-height 的值设置为 height 的值,
就可以实现文字垂直居中

有序列表的作用:给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后之分。

*前端性能监控系统:* 预览地址

但貌似移动端不太友好, 文字总是略微偏上一点点, 这看上去就很不舒服了,
很影响用户体验

有序列表格式:

=====================================================================

考虑过加上 padding: xxrem 0, 但结果还是不太满意…

<ol>

 

最终找到两种解决办法, 代码如下

    <li></li>

  背景:应工作要求,需要整理出前端项目的报错信息,尝试过很多统计工具,如:
腾讯bugly、听云、OneApm、还有一个http://sentry.io 。
因为各种原因,如:
统计的日志无法正确分类,收费太高,存储数量有限制等等,都放弃使用了。作为一个前端工程师,看到这些统计工具之后,应该就能清楚这些监控系统的原理是怎样的。那不如我们自己来写一个吧。

  • 方法一

</ol>

  Bugly统计需要由APP开发工程师的参与,且日志杂乱,不可取.

其它用法和ul都差不多,也就是应用场景/注意点都和ul差不多

  听云,OneApm均有成型的项目,日志分析全面,应该是大公司的首选,但是感觉有些功能比较鸡肋,也许是产品经理们想得比较深远,哈哈。均按流量收费,我想很多人还是不舍得花这个钱的。

span {
    width: 1rem;
    height: 1rem;
    font-size: 0.12rem;
    color: green;
    background: lightblue;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

<ol type=”A/a/I/i”>

  Sentry.io 不得不说,这款产品很棒,做得很精细,符合老外的风格,但美中不足的是,没有上边两家做的全面,主要是侧重点不同。js错误统计量为1万条,多则收费。

  • 方法二 (仅限于字数固定情况)

      <li></li>

 

</ol>


span {
    font-size: 0.12rem;
    color: green;
    background: lightblue;
    padding: 0.03rem 0.15rem;
}

在企业开发中没有人指定这个属性都是用CSS

前端监控功能主要包含:

有序列表和无序列表只有语义和前面都显示不同,但是它的显示对于我们来说没有什么用处,我们都是用CSS来做的,在企业开发中大部分有序列表都是用无序列表来做的。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注