第一步(本地浏览器安装调试扩展)

下载扩展包并解压

链接:https://pan.baidu.com/s/14df0ewl_3wjRHc8H1jsrWQ
提取码:yyu1

打开谷歌浏览器,地址栏输入 chrome://extensions/ 进入扩展项设置

然后加载已解压的扩展程序,选中解压后的目录中的 chrom文件夹,确定即可。

解压包中php文件夹和根目录的demo有使用方法及示例.

如下图就安装成了

第二步(服务器安装)

  • 安装服务端npm install -g socketlog-server , 运行命令 socketlog-server 即可启动服务。 将会在本地起一个websocket服务 ,监听端口是1229 。 如果想服务后台运行: socketlog-server > /dev/null & 我们提供公用的服务端,需要去申请client_id : http://slog.thinkphp.cn/

  • 如果你的服务器有防火墙,请开启1229和1116两个端口,这两个端口是socketlog要使用的。

  • 在自己的程序中发送日志:

    1. <?php
    2. include './php/slog.function.php';
    3. slog('hello world');
    4. ?>
  • 用slog函数发送日志, 支持多种日志类型:

    1. slog('msg','log'); //一般日志
    2. slog('msg','error'); //错误日志
    3. slog('msg','info'); //信息日志
    4. slog('msg','warn'); //警告日志
    5. slog('msg','trace');// 输入日志同时会打出调用栈
    6. slog('msg','alert');//将日志以alert方式弹出
    7. slog('msg','log','color:red;font-size:20px;');//自定义日志的样式,第三个参数为css样式
    • 通过上面例子可以看出, slog函数支持三个参数:

    • 第一个参数是日志内容,日志内容不光能支持字符串哟,大家如果传递数组,对象等一样可以打印到console中。

    • 第二个参数是日志类型,可选,如果没有指定日志类型默认类型为log, 第三个参数是自定样式,在这里写上你自定义css样式即可。

    • ##配置

      • 在载入slog.function.php文件后,还可以对SocketLog进行一些配置。

      • 例如:我们如果想将程序的报错信息页输出到console,可以配置

        1. <?php
        2. include './php/slog.function.php';
        3. slog(array(
        4. 'error_handler'=>true
        5. ),'config');
        6. echo notice;//制造一个notice报错
        7. slog('这里是输出的一般日志');
        8. ?>
      • 配置SocketLog也是用slog函数, 第一个参数传递配置项的数组,第二个参数设置为config

      • 还支持其他配置项

        1. <?php
        2. include './php/slog.function.php';
        3. slog(array(
        4. 'enable'=>true,//是否打印日志的开关
        5. 'host'=>'localhost',//websocket服务器地址,默认localhost
        6. 'optimize'=>false,//是否显示利于优化的参数,如果运行时间,消耗内存等,默认为false
        7. 'show_included_files'=>false,//是否显示本次程序运行加载了哪些文件,默认为false
        8. 'error_handler'=>false,//是否接管程序错误,将程序错误显示在console中,默认为false
        9. 'force_client_id'=>'',//日志强制记录到配置的client_id,默认为空
        10. 'allow_client_ids'=>array()////限制允许读取日志的client_id,默认为空,表示所有人都可以获得日志。
        11. )
        12. ,'config');
        13. ?>
      • optimize 参数如果设置为true, 可以在日志中看见利于优化参数,如:[运行时间:0.081346035003662s][吞吐率:12.29req/s][内存消耗:346,910.45kb]

      • show_included_files 设置为true,能显示出程序运行时加载了哪些文件,比如我们在分析开源程序时,如果不知道模板文件在那里, 往往看一下加载文件列表就知道模板文件在哪里了。

      • error_handler 设置为true,能接管报错,将错误信息显示到浏览器console, 在开发程序时notice报错能让我们快速发现bug,但是有些notice报错是不可避免的,如果让他们显示在页面中会影响网页的正常布局,那么就设置error_handler,让它显示在浏览器console中吧。 另外此功能结合php taint也是极佳的。 taint能自动检测出xss,sql注入, 如果只用php taint, 它warning报错只告诉了变量输出的地方,并不知道变量在那里赋值、怎么传递。通过SocketLog, 能看到调用栈,轻松对有问题变量进行跟踪。 更多taint的信息:http://www.laruence.com/2012/02/14/2544.html

      • 设置client_id: 在chrome浏览器中,可以设置插件的Client_ID ,Client_ID是你任意指定的字符串。

      • 设置client_id后能实现以下功能:

      • 1,配置allow_client_ids 配置项,让指定的浏览器才能获得日志,这样就可以把调试代码带上线。 普通用户访问不会触发调试,不会发送日志。 开发人员访问就能看的调试日志, 这样利于找线上bug。 Client_ID 建议设置为姓名拼命加上随机字符串,这样如果有员工离职可以将其对应的client_id从配置项allow_client_ids中移除。 client_id除了姓名拼音,加上随机字符串的目的,以防别人根据你公司员工姓名猜测出client_id,获取线上的调试日志。

      • 设置allow_client_ids示例代码:

        1. slog(array(
        2. 'allow_client_ids'=>array('luofei_zfH5NbLn','easy_DJq0z80H')
        3. ),'set_config')
      • 2, 设置force_client_id配置项,让后台脚本也能输出日志到chrome。 网站有可能用了队列,一些业务逻辑通过后台脚本处理, 如果后台脚本需要调试,你也可以将日志打印到浏览器的console中, 当然后台脚本不和浏览器接触,不知道当前触发程序的是哪个浏览器,所以我们需要强制将日志打印到指定client_id的浏览器上面。 我们在后台脚本中使用SocketLog时设置force_client_id 配置项指定要强制输出浏览器的client_id 即可。

      • 示例代码:

        1. <?php
        2. include './php/slog.function.php';
        3. slog(array(
        4. 'force_client_id'=>'luofei_zfH5NbLn'
        5. ),'config');
        6. slog('test'); `
      • ##支持composer

        • 使用composer安装命令 composer require luofei614/socketlog

        • 直接调用静态方法

          1. <?php
          2. require './vendor/autoload.php';
          3. use think\org\Slog
          4. //配置socketlog
          5. Slog::config(array(
          6. 'enable'=>true,//是否打印日志的开关
          7. 'host'=>'localhost',//websocket服务器地址,默认localhost
          8. 'optimize'=>false,//是否显示利于优化的参数,如果运行时间,消耗内存等,默认为false
          9. 'show_included_files'=>false,//是否显示本次程序运行加载了哪些文件,默认为false
          10. 'error_handler'=>false,//是否接管程序错误,将程序错误显示在console中,默认为false
          11. 'force_client_id'=>'',//日志强制记录到配置的client_id,默认为空
          12. 'allow_client_ids'=>array()////限制允许读取日志的client_id,默认为空,表示所有人都可以获得日志。
          13. ));
          14. Slog::log('log'); //一般日志
          15. Slog::error('msg'); //错误日志
          16. Slog::info('msg'); //信息日志
          17. Slog::warn('msg'); //警告日志
          18. Slog::trace('msg');// 输入日志同时会打出调用栈
          19. Slog::alert('msg');//将日志以alert方式弹出
          20. Slog::log('msg','color:red;font-size:20px;');//自定义日志的样式,第三个参数为css样式

        ##支持ThinkPHP ThinkPHP5后, 在框架层集成了SocketLog ,只需要设置配置即可用

        ##对数据库进行调试

        • SocketLog还能对sql语句进行调试,自动对sql语句进行explain分析,显示出有性能问题的sql语句。 如下图所示。

        • 图中显示出了三条sql语句 , 第一条sql语句字体较大,是因为它又性能问题, 在sql语句的后台已经标注Using filesort。 我们还可以点击某个sql语句看到sql执行的调用栈,清楚的知道sql语句是如何被执行的,方便我们分析程序、方便做开源程序的二次开发。图中第三条sql语句为被点开的状态。

        • 用slog函数打印sql语句是,第二个参数传递为mysql或mysqli的对象即可。 示例代码:

          1. $link=mysql_connect( 'localhost:3306' , 'root' , '123456' , true ) ;
          2. mysql_select_db('kuaijianli',$link);
          3. $sql="SELECT * FROM `user`";
          4. slog($sql,$link);

        后面会以OneThink为实例再对数据库调试进行演示。

        通过上面的方法,socketlog还能自动为你检测没有where语句的sql操作,然后自动提示你。

        • 注意,有时候在数据比较少的情况下,mysql查询不会使用索引,explain也会提示Using filesort等性能问题, 其实这时候并不是真正有性能问题, 你需要自行进行判断,或者增加更多的数据再测试。

        ##对API进行调试 网站调用了API ,如何将API程序的调试信息也打印到浏览器的console中? 前面我们讲了一个配置 force_client_id, 能将日志强制记录到指定的浏览器。 用这种方式也可以将API的调试信息打印到console中,但是force_client_id 只能指定一个client_id, 如果我们的开发环境是多人共用,这种方式就不方便了。 其实只要将浏览器传递给网站的User-Agent 再传递给API, API程序中不用配置force_client_id, 也能识别当前访问程序的浏览器, 将日志打印到当前访问程序的浏览器, 我们需要将SDK代码稍微做一下修改。 调用API的SDK,一般是用curl写的,增加下面代码可以将浏览器的User-Agent传递到API 。

        1. $headers=array();
        2. if(isset($_SERVER['HTTP_USER_AGENT']))
        3. {
        4. $headers[]='User-Agent: '.$_SERVER['HTTP_USER_AGENT'];
        5. }
        6. if(isset($_SERVER['HTTP_SOCKETLOG']))
        7. {
        8. $headers[]='Socketlog: '.$_SERVER['HTTP_SOCKETLOG'];
        9. }
        10. curl_setopt($ch,CURLOPT_HTTPHEADER,$headers);

        ##区分正式和开发环境

        进入chrome浏览器的“工具”-->“扩展程序” , 点击SocketLog的“选项”进行设置。

        ##分析开源程序

        有了SocketLog,我们能很方便的分析开源程序,下面以OneThink为例, 大家可以在 http://www.topthink.com/topic/2228.html 下载最新的OneThink程序。 安装好OneThink后,按下面步骤增加SocketLog程序。

        • 将SocketLog.class.php复制到OneThink的程序目录中,你如果没有想好将文件放到哪个子文件夹,暂且放到根目录吧。

        • 编辑入口文件index.php, 再代码的最前面加载slog.function.php ,并设置SocketLog

          1. <?php
          2. include './slog.function.php';
          3. slog(array(
          4. 'error_handler'=>true,
          5. 'optimize'=>true,
          6. 'show_included_files'=>true
          7. ),'config');
        • 编辑ThinkPHP/Library/Think/Db/Driver.class.php 文件,在这个类中的execute 方法为一个执行sql语句的方法,增加代码:

          1. slog($this->queryStr,$this->_linkID);
        • 类中的query方法也是一个执行sql语句的地方, 同样需要增加上面的代码

          • 然后浏览网站看看效果:

          通过console的日志,访问每一页我们都知道程序干了什么,是一件很爽的事情。

          • 提示:另一种更简单的方法,因为OneThink每次执行完sql语句都会调用$this->debug, 所以我们可以把slog($this->queryStr,$this->_linkID); 直接写在 Db.class.php文件的debug方法中。 这样不管是mysqli还是mysql驱动都有效。

谷歌浏览器安装 socketLog的更多相关文章

  1. linux 图形化界面 && 谷歌浏览器 安装

    一.图形化界面安装 yum groupinstall "Desktop" 如果运行显示 则 yum groupinstall "X Window System" ...

  2. 谷歌浏览器安装json格式化插件

    1.下载JsonView扩展程序压缩包 下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 点击[Clone or download] ...

  3. 【Postman】接口测试工具:在谷歌浏览器安装插件方法以及使用说明

    安装插件方法: <如何在谷歌浏览器chrome中离线安装.crx扩展程序的三种方法?> <postman chrome插件的安装与使用> 下载地址:http://www.cnp ...

  4. Chrome 谷歌浏览器安装使用 Postman 和 Sense 插件

    博客地址:http://www.moonxy.com 一.前言 Google Chrome 的特点是简洁.快速等.Chrome 支持多标签浏览,每个标签页面都在独立的"沙箱"内运行 ...

  5. 谷歌浏览器安装Elasticsearch-head 插件

    下载该插件,地址:https://github.com/liufengji/es-head/blob/master/elasticsearch-head.crx 下载后的文件名是:elasticsea ...

  6. 谷歌浏览器安装xpath使用

    一.Xpath-helper插件说明 谷歌浏览的插件,目的是可以定位到具体的元素中,实时验证xpath是不是正确 谷歌插件下载位置:https://chrome.google.com/webstore ...

  7. 谷歌浏览器 安装 Vue.js devtools 工具

    如果是vue写的项目,谷歌浏览器右上角的vue小图标会亮起!下面介绍如何安装 1.谷歌浏览器插件商店可以点击安装[需要梯子] 2.vue官网有对应的安装包,需要自己手动 npm run build 一 ...

  8. 谷歌浏览器安装apizza

    接口测试是卡发中不可缺少的一环,那么常用的postman是英文就很不方便一些小伙伴的使用,所以此工具和postman功能相同且升级并且是中文模式 安装: 链接:https://pan.baidu.co ...

  9. 谷歌浏览器安装jsonview

    1.下载JsonView扩展程序压缩包 下载链接:https://pan.baidu.com/s/1B0IkrHHyTiYtwJEGE_halA 提取码:myi6 2.解压这个压缩包 3.打开谷歌浏览 ...

随机推荐

  1. C++ 友元(friend关键字)、类中的重载、操作符重载(operator关键字)

    C++ 中友元的用法: 1.在类中使用friend关键字声明 2.类的友元可以是其它类或者具体函数 3.友元不是类的一部分 4.友元不受类中访问级别的限制 5.友元可以直接访问具体类中的所有成员. 友 ...

  2. WPF最小化窗体后激活函数显示不了窗体

    WPF最小化窗体后激活函数显示不了窗体 今天测试小哥给我提了一些问题,其中一个问题是这样的,点击web端的一个链接,是能启动本地的一个应用程序的,如果本地应用程序已启动(通过tcp进程间通信),那么应 ...

  3. golang(6): 接口 & 反射

    接口详解 // 举例:sort包中的 Sort 函数,如下: func Sort(data Interface) Sort sorts data. It makes one call to data. ...

  4. ccs之经典布局(三)(等分,等高布局)

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

  5. python之multiprocessing多进程

    multiprocessing 充分利用cpu多核一般情况下cpu密集使用进程池,IO密集使用线程池.python下想要充分利用多核CPU,就用多进程. Process 类Process 类用来描述一 ...

  6. Boston Key Party 2015 Heath Street 题解(Writeup)

    Heath Street是Boston Key Party 2015的一道数字取证题目,我们得到了一个叫做“secretArchive.6303dd5dbddb15ca9c4307d0291f77f4 ...

  7. 一、Nginx多站点配置

    一.下载 目录文件: 二.运行方式 (1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过 (2)打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start ...

  8. PAT Basic 1014 福尔摩斯的约会 (20 分)

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  9. 【NOI 2019】同步赛 / 题解 / 感想

    非常颓写不动题怎么办…… 写下这篇博客警示自己吧…… 游记 7.16 我并不在广二参加 NOI,而是在距离广二体育馆一公里远的包间打同步赛(其实就是给写不动题找个理由) 上午身体不舒服,鸽了半天才看题 ...

  10. Python核心技术与实战——十九|一起看看Python全局解释器锁GIL

    我们在前面的几节课里讲了Python的并发编程的特性,也了解了多线程编程.事实上,Python的多线程有一个非常重要的话题——GIL(Global Interpreter Lock).我们今天就来讲一 ...