In the process of local web development and debugging, it is often necessary to replace the request with a local file or forward the request to the specified local server, that is, the Map Local function. However, the map Local function used in practice often encounters a variety of more complex situations, such as md5 in the request URL, replacing combo request, Instead of jSONP requests, sometimes requests for different pages to replace different files or directories, and so on, this article will show you how to use Whistle to implement various Map Local functions.
Whistle is a cross-platform packet capture and debugging agent tool based on Node. It not only involves all aspects of the packet capture and debugging agent tool, but also integrates Weinre and custom log functions for debugging mobile pages. All operations only need to be implemented through simple configuration like hosts, and it supports plug-in extension function. For details, visit Github: github.com/avwo/whistl… .
Each operation of a whistle corresponds to a protocol. Map Local mainly involves file, TPL, xFILE, and XTPL protocols and their plug-in extensions:
File to replace
If the match is by domain name, path, or wildcard path, the whistle will automatically fill in the local file path based on the rest of the matched URL and ignore the following request parameters:
# Match domain name
www.test.com E:\workspace\test # is equivalent to file://E:\workspace\test or file://E:/workspace/test
# Mac or Linux
www.test.com /usr/workspace/test # is equivalent to file:///usr/workspace/test
# Path matching
www.test.com/abc E:\workspace\test # is equivalent to file://E:\workspace\test
# Mac or Linux
www.test.com/abc /usr/workspace/test # is equivalent to file:///usr/workspace/test
# Wildcard path match
*/ E:\workspace\test # is equivalent to file://E:\workspace\test
# Mac or Linux
*/abc /usr/workspace/test # is equivalent to file:///usr/workspace/test
Copy the codeDomain name matching and wildcard path matching can be regarded as path matching, the difference is:
- Domain name matching can match the url of the changed domain name with any port, i.e
www.test.com file://E:\workspace\testCan match at the same timehttps://www.test.com:8080/xxx.http://www.test.com/xxxSuch a request- The difference between wildcard and domain name matching is that the wildcard path can match the corresponding path of any domain name
The path matching will match the url of the path and its subpaths, and automatically fill the exceeded path to the specified local file path, such as the configuration rule www.test.com/abc E:\workspace\test, request http://www.test.com/abc, Request parameters allowed in https://www.test.com/abc/index.html (http://www.test.com/abc?xxx, https://www.test.com/abc/index.html?xxx) respectively mapped to a local file E: \ workspace \ test, E: \ workspace \ test \ index HTML, if the corresponding file does not exist, it returns 404.
If you don’t want auto-complete, you can configure:
www.test.com <E:\workspace\test> file://
All requests in the www.test.com domain will only be replaced by E:\workspace\test
If you want to specify a fixed URL that matches a specified file and do not want its subpaths to match the rule, you can use exact match:
$www.test.com E:\workspace\test\index.html
Copy the codeThe above configuration matches only the url similar to the root path of http://www.test.com/ and https://www.test.com/?xxx, but does not match the rule of http://www.test.com/abc.
Automatically ignores md5 strings in urls
To remove md5 from the URL, you can use either a regular match or reqScrip, as shown in the following example:
# www.test.com/abc E:\workspace\test
/^[^/]+://www\.test\.com/abc/([^?]+)\.[\da-f]+(\.\w+)/i E:\workspace\test/The $1$2
# Here /$1$2 cannot be changed to \$1$2 because \ is an escape character
# can also be matched with wildcard re
^www.test.com/abc/**.*.* E:\workspace\test/The $1.$3
Copy the codeRegular matches or wildcard regular matches do not have auto-complete functionality, but you can do so by using regular submatches, where $& or $0 represents the entire request URL, $1, $2… If your path contains $&, \ is an escape character, \$x can keep whistle from submatching.
The above configuration similar request http://www.test.com/abc/dev/index.ec6abf23.js will be mapped to a local file E \ workspace \ test \ dev \ index js, on regular and wildcard regular matching content can see: matching mode
Replace the JSONP request
Since the jSONP request needs to write the callback in the URL to the response, it needs to use the whistle’s TPL protocol. TPL supports replacing the corresponding {XXX} placeholder in the file with the request parameter value:
www.test.com/cgi-jsonp tpl://E:\test
Copy the codeIf E:\test\ contains a file data.json:
{callback}({"ec": 0})
Copy the codeRequest www.test.com/cgi-jsonp/data.json?callback=testCallback and return:
testCallback({"ec": 0})
Copy the codeList to replace
Sometimes static files are distributed in local directories, but it is not clear which directory the files are in. In this case, you can use the list of files instead of the function:
www.test.com/abc E:\workspace\test|E:\workspace\test2|E:\workspace\test3
# jSONp request replacement
www.test.com/cgi-jsonp E:\test|E:\test2|E:\test3
Copy the codeThe above matching rules are configured to search for the corresponding files in each directory. If no file is found, a 404 is returned.
Xfile and XTPL are replaced
If no match is found in the file and TPL protocol, 404 will be returned. If no match is found in the local file, xfile and XTPL will be returned.
www.test.com/abc xfile://E:\workspace\test|E:\workspace\test2|E:\workspace\test3
# jSONp request replacement
www.test.com/cgi-jsonp xtpl://E:\test|E:\test2|E:\test3
Copy the codeReplace by referer
When developing and testing multiple pages at the same time, and the static resources such as JS, CSS and pictures in these pages need to map to different directories, and the URL structure of static resources of these pages is not clear, then we need to request the referer to dynamically judge the rules, which can be realized with whistle’s reqScrip:
Create a checkreferer. js in the Whistle interface Values:
const referer = headers.referer || ' ';
if (headers.referer.indexOf('download.html') !== -1) {
rules.push('*/ E:/test/download');
} else {
rules.push('*/ E:/test/dev');
}
Copy the codeIn Rules, configure Rules:
*.cdn.cn reqScript://{checkReferer.js}
Copy the code
*.cdn.cn
Forward requests
When using webPack, it is common to use webpack-dev-server as an in-memory static server. You can use whistle to forward the request to the static server. Suppose the static server is on port 6666:
*.cdn.cn/test http://127.0.0.1:6666
Copy the codeThen replace request https://x.cdn.cn/test/xxx is http://127.0.0.1:6666/xxx.
Replace Combo request
In theory, Whistle can handle all the functions of Map Local. If some more complex functions are needed, such as replacing combo requests, it can be implemented with the whistle.com BO plug-in, or it can simplify the configuration of its own business by customising the Whistle plug-in.
Map Loca is just one of the features of Whistle. For more on Whistle, visit Gihtub: github.com/avwo/whistl… .