Ngrok, long ago understood, but in peacetime did not how to use, only know that the Internet can access the Intranet, about the micro channel payment debugging, application scenarios, really did not think deeply, and then did not move…

Today, I read unionPay, found a good introduction article, and saw NGROk again. In addition, I also made wechat and Alipay payment, so I thought a little bit: Synchronous notification is an asynchronous notification that can jump back to the local page. The payment platform has to initiate post request to our local, which can not access the local, so we need to use Ngrok to let the external network access the local Intranet. (Just think about this one step, you know the application scenario)

When I first got to know Ngrok, IT was only through the article posted by Sunny in the group that I got to know Ngrok. Now, he has also done the domestic Ngrok service: www.ngrok.cc/

Here’s a quote from his ngrok build article: www.sunnyos.com/article-sho…

How to use SocketLog for web and wechat development and debugging

A glance, usually we wechat debugging, some debugging returned content, need to be written in the past, to analyze; The SocketLog is written to the browser using the socket and displayed on the console.

/* The browser supports socket connection. I haven’t read the specific SocketLog content, including “how to use SocketLog for Web and wechat development and debugging”. I just read the log output to the browser, I don’t know whether it is correct.

Why am I writing this? Just want to say, a lot of knowledge is related, but also need to accumulate. For example, if I've never made a payment before, what is asynchronous notification? Don't understand. The Socket is unaware of what SocketLog might do. I still have to think more and learn more! A lot of things at the bottom of their own, understand too little!Copy the code

* /

Let’s get started with SocketLog:

SocketLog Github address: https://github.com/luofei614/SocketLog how to carry on the web and through SocketLog WeChat development debug https://www.sunnyos.com/article-show-35.htmlCopy the code

Looked at, the document is very detailed, I did just as simple summed up again: use: 1. Install the chrome plug-ins: 1 > online installation: chrome.google.com/webstore/de…

2> Manual installation: download Chrome. CRX on Github, enter: chrome://extensions, and drag chrome. CRX into page 2. Install socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: NPM install -g socketlog-server: Socketlog-server > /dev/null & Note: Ports 1229 and 1116 need to be enabled if the server has a firewall. Include './ PHP /slog.function.php'; slog('hello world'); PHP socketlog: include './ PHP /slog.function.php'; 1> Log slog(' log content ', 'log type ',' custom CSS style '); Example: slog('hello world', 'log', 'color: red; font-size: 20px; '); Supported log types: Log // General log (default log type) error // Error log INFO // Information log WARN // Warning log trace // Call stack Alert is generated when logs are entered. // SocketLog is displayed in alert mode Log configuration: slog([config array], 'config'); Example: slog(['error_handler' => true, 'enable' => true,], config); Supported configuration items: enable - Whether to print logs host-websocket server address, default localhost optimize - Whether to display parameters that can be optimized, such as: Show_included_files - Whether to show which files are loaded for this program run. Default: false error_handler - Whether to take over errors and display them on the console. Allow_client_ids - Limits the client_ID from which logs are allowed to be read. The default is null, indicating that all users can access the logs. [SQL] SELECT * FROM 'optimize' WHERE 'optimize' = 'true' [SQL] select * FROM 'optimize' where 'optimize' = 'true' [SQL][SQL] select * FROM 'optimize' where 'optimize' = 'true' [SQL][SQL] select * FROM 'optimize' where 'optimize' = 'true' Show_included_files is set to true to show which files are loaded when the program is running. For example, when analyzing open source programs, if we don't know where the template file is, we often know where the template file is by looking at the load file list. Error_handler is set to true, so it can take over error reporting and display error information to the browser console. Notice errors can help us find bugs quickly when developing programs. However, some notice errors are inevitable, if they are displayed in the page, the normal layout of the page will be affected. Set error_handler to display on the browser console. It's also great when combined with PHP Taint. Taint can automatically detect XSS and SQL injection. If you only use PHP TAINt, it only tells you where the variable is output, and does not know where the variable is assigned and how to pass it. Through SocketLog, you can see the call stack and easily keep track of problematic variables. Allow_client_ids allows logging to be available only to specified browsers so that debugging code can be brought online. Normal user access does not trigger debugging and logs are not sent. Debug logs that developers can access to find online bugs. It is recommended to set Client_ID to a name with a random string so that if an employee leaves, the corresponding Client_ID can be removed from the allow_client_ids configuration item. Client_id in addition to name pinyin, plus random string purpose, Slog (['allow_client_ids' => [' XXX ', 'yyy'],], 'config'); Force_client_id enables background scripts to also output logs to Chrome. If the background script needs debugging, you can also print the log to the browser console. Of course, the background script does not touch the browser, so you do not know which browser is currently triggering the program. So we need to force the log to be printed to the browser with the specified client_id. When we use SocketLog in the background script, we set the force_client_id configuration item to specify the client_ID of the browser to force. slog([ 'force_client_id' => 'xxx', ], 'config'); Note: For the allow_client_ids and force_client_id configuration items, you need to set the Client_ID of the plug-in in chrome. Install: require waffei614 /socketlog to call composer using static methods:  use think\org\Slog; // Configure Slog::config(['error_handler' => true, 'enable' => true,]); Slog::log(' log '); Slog: : error (" log "); Slog: : info (' log '); Slog: : warn (' log '); Slog: : trace (" log "); Slog: : alert (' log '); Support for ThinkPHP, ThinkPHP5, in the framework layer integration of SocketLog, you just need to configure the configuration of the database debugging see documentation for API debugging (this is useful) website called the API, How do I print debugging information for API programs to the browser console as well? Earlier, we talked about a configuration called force_client_id that forces logging to a specified browser. It is also possible to print API debugging information to the console in this way, but force_client_id can only specify one client_ID, which is not convenient if our development environment is shared by multiple people. In fact, as long as the browser is passed to the user-agent of the website and then passed to the API, the API program does not need to configure force_client_ID, but also can identify the browser that is currently accessing the program, and print the log to the browser that is currently accessing the program. We need to modify the SDK code slightly. Curl API API API API API API API API API API API API API API API API $headers=array(); if(isset($_SERVER['HTTP_USER_AGENT'])) { $headers[]='User-Agent: '.$_SERVER['HTTP_USER_AGENT']; } if(isset($_SERVER['HTTP_SOCKETLOG'])) { $headers[]='Socketlog: '.$_SERVER['HTTP_SOCKETLOG']; } curl_setopt($ch,CURLOPT_HTTPHEADER,$headers); To distinguish between formal and development environments, go to Tools > Extensions in Chrome and click SocketLog options. Chrome - the extension: / / apkmbfpihjhongonfcgdagliaglghcod/options open source HTML) analysis procedure documentCopy the code

Results: 1. I am using Laravel framework, socketlog is installed by Composer, automatic loading is a problem!

Fix: check the vendor/luofei614 / socketlog/composer. The json: "autoload" : {" PSR - 4 ": {" think \ \ slog \ \" : }} 1> PHP /slog. PHP source code: namespace think; The namespace instead think \ slog. 2> Use: use think\org\Slog; To use think \ slog \ slog. 2. The following two conditions must be configured for the socketlog output of the background script: 1> Chrome plug-in client_id 2> force_client_id 3 in the code. Debugging API 1> Is not something we do for a single API interface, for example, through Postman to debug the API's return results. It's not like we're asking for a page that calls some other API (either from a third party or our platform itself). We can return the result to SocketLog and print 3> instead, we request a page that calls other apis (which are also our platform's own and cannot be accessed by third parties). So we're using Socketlog in these API methods to output some debugging information so that we can explain what the documentation says that we need to access the web pages $_SERVER['HTTP_USER_AGENT'] and $_SERVER['HTTP_SOCKETLOG'], $headers=array(); if(isset($_SERVER['HTTP_USER_AGENT'])) { $headers[]='User-Agent: '.$_SERVER['HTTP_USER_AGENT']; } if(isset($_SERVER['HTTP_SOCKETLOG'])) { $headers[]='Socketlog: '.$_SERVER['HTTP_SOCKETLOG']; } curl_setopt($ch,CURLOPT_HTTPHEADER,$headers); 4. Socketlog: Vendor/luofei614 / socketlog/chrome - Google browser plug-in, listening to the socket, and so on and so forth, added HTTP_SOCKETLOG head (js, probably also can understand) the way PHP - function + composer, Our PHP code uses the Server-Node plugin to enable the socket service and HTTP service. 5.SocketLog output is output to the TAB page console of the browser that is currently openCopy the code