我相信我们的读者里有很多都是原生浏览器爱好者，比如 Chrome 、 Edge 或者是 Safari ，我用的就是 Chrome 。我非常喜欢 Chrome 干净简洁的界面，但是有些时候会发现这个浏览器在功能上也有一点太“干净简洁”了，于是乎我就开始研究起了 Chrome 插件，于是乎我就发现了我今天要推荐的 Tampermonkey ……

Tampermonkey是个什么东西？

Tampermonkey ，俗称“油猴”，是一款在浏览器上运行和管理脚本的插件。所谓脚本就是一段代码，它们能够优化您的网页浏览体验。安装之后，有些脚本能为网站添加新的功能，有些能使网站的界面更加易用，有些则能隐藏网站上烦人的部分内容。

有了 Tampermonkey ，你能够轻松有效地使用和管理网页脚本，让你的上网体验更加舒适。

你需要准备什么？

Chrome浏览器

这款插件除了Chrome之外还支持 Microsoft Edge 、 Safari 、 Opera Next 和 Firefox。

如何使用？

首先下载安装插件……


图片是chrome在应用商城中的的截图

如何安装插件

脚本我一般是在 Greasy Fork 这个网站上下载，步骤非常简单，找到你想安装的脚本，点一下安装此脚本就行了。

这个插件能干什么？

脚本数量可以说是数不胜数，我在这里给大家推荐几个我自己常用的。

视频去广告、音乐直接下载、百度网盘直接下载等功能

在Greasy Fork 中直接安装

示例图片
1.vip视频解析+去广告

2.vip音乐下载

今天给大家介绍一下开发过程中，四个环境以及各自的功能特点，四个环境分别是：pro、pre、test、dev环境，中文名字：生产环境、灰度环境、测试环境、开发环境，其实大家看英文应该就差不多可以看出来对应的是什么环境。

环境介绍：

pro环境：生产环境，面向外部用户的环境，连接上互联网即可访问的正式环境。

pre环境：灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。

test环境：测试环境，外部用户无法访问，专门给测试人员使用的，版本相对稳定。

dev环境：开发环境，外部用户无法访问，开发人员使用，版本变动很大。

分成四个环境原因：

大多数人都知道四个环境指的是什么，但是很多人却不知道为什么要这么区别，甚至为了省事就只有dev和pro环境。如果项目没有上线之前没有问题，如果项目上线之后就会有非常麻烦的事情发生.

问题

写【草书文档】这个应用的时候用到了目录树，相关配置挺多的，留存一下。
jstree中文官网
jsttee英文官网
英文官网要比中文的版本高一些，所以用要用github最新版的，看文档就都差不多了。

代码解析

$("#menu").jstree({
                    "core": {
                        "check_callback" : true,
                        "themes": {"stripes": true},
                        "data": d.menu
                    },
                    contextmenu   : {
                        items : function(node){
                            let menu = {
                                createCatalog  : {
                                    label   : "新建目录",
                                    icon    : "fa fa-folder-open",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"catalog"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建目录";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                createPage : {
                                    label: "新建文档",
                                    icon: "fa fa-file-o",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"page"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建文档";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                rename  : {
                                    label: "重命名",
                                    icon: "fa fa-share",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.edit(obj);
                                    }
                                },
                                delete  : {
                                    label: "删除",
                                    icon: "fa fa-times",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        if(inst.is_selected(obj)) {
                                            inst.delete_node(inst.get_selected());
                                        } else {
                                            inst.delete_node(obj);
                                        }
                                    }
                                },
                            }
                            if(node.type == "page"){
                                // 文档-重命名、删除
                                delete menu.createCatalog;
                                delete menu.createPage;
                            }
                            return menu;
                            
                        }
                    },
                    types : {
                        root    : {
                            icon  : "fa fa-home",
                            valid_children : ["catalog","page"]
                        },
                        catalog   : {
                            icon  : "fa fa-folder-open",
                            valid_children : ["catalog","page"]
                        },
                        page      : {
                            icon  : "fa fa-file-o",
                            valid_children : []
                        }
                    },
                    plugins : ["contextmenu", "dnd", "search","state", "types", "wholerow"]
                }).on("changed.jstree",function(e,d){
                    // console.log(d)
                    // if(d.node.children.length == 0 && d.node.original.type == "page"){
                    //     console.log(d.node.id)
                    // }
                });

有三个命令vnstat、iftop、nethogs（推荐）

都需要额外安装软件 使用yum或apt-get

一、vnstat使用，查看接口统计报告

vnstat -i eth0 -l #实时流量情况

还有其他命令使用--help查看

ctrl+c结束后，会显示监控期间的流量统计结果

二、iftop使用，检查带宽使用情况

iftop可以用来监控网卡的实时流量（可以指定网段）、反向解析IP、显示端口信息等

命令用法：

-i设定监测的网卡，如：# iftop -i eth1

-B 以bytes为单位显示流量(默认是bits)，如：# iftop -B

-n使host信息默认直接都显示IP，如：# iftop -n

-N使端口信息默认直接都显示端口号，如: # iftop -N

交互命令：

按n切换显示本机的IP或主机名;

按s切换是否显示本机的host信息;

按d切换是否显示远端目标主机的host信息;

按t切换显示格式为2行/1行/只显示发送流量/只显示接收流量;

按N切换显示端口号或端口服务名称;

按S切换是否显示本机的端口信息;

按D切换是否显示远端目标主机的端口信息;

按p切换是否显示端口信息;

使用截图：

三、nethogs使用，按进程实时统计网络带宽利用率(推荐)

命令用法：

1、设置5秒钟刷新一次，通过-d来指定刷新频率：nethogs -d 5

2、监视eth0网络带宽 :nethogs eth0

3、同时监视eth0和eth1接口 : nethogs eth0 eth1
交互命令：
以下是NetHogs的一些交互命令(键盘快捷键)
m : 修改单位
r : 按流量排序
s : 按发送流量排序
q : 退出命令提示符

使用截图：

问题

搞地产活动的H5页面，有个自动播放音乐的按钮，安卓手机自动播放正常，苹果手机中就会出现不自动播放的情况，而且点击播放按钮还是可以播放音乐的。

解决代码

<audio id="back_music" autoplay="" loop="" src="{if !empty($base['backmusic'])}{php echo tomedia($base['backmusic']);}{else}../addons/ruifan_yaoyiyao/static/background_music.mp3{/if}" preload="auto"></audio>
<div id="play_button">
    <img src="../addons/ruifan_yaoyiyao/images/audio.png" width="100%" />
</div>

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('back_music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});