charles proxy_使用Charles Proxy进行远程调试

电玩女神 2023-02-22 03:36 3阅读 0赞

charles proxy

The most difficult part of supporting TV apps when you didn't create them and don't have access to the source code is debugging them when asked for help.  It's almost an unfair request -- "we wont give you access to edit the code but we want you to give use the answer."  Editing remote code is a pain...but thanks to Charles this practice got a whole lot easier.  Charles allows me to intercept calls to remote CSS and JavaScript files and substitute my own, allowing for infinitely easier debugging of remote code I don't have access to change.

当您没有创建电视应用程序且无权访问源代码时，支持电视应用程序最困难的部分就是在寻求帮助时对其进行调试。 这几乎是不公平的要求-“我们不会授予您编辑代码的权限，但希望您提供答案。” 编辑远程代码很麻烦...但是，由于有了Charles，这种做法变得非常容易。 Charles允许我拦截对远程CSS和JavaScript文件的调用并替换为我自己的调用，从而使我无权更改的远程代码的调试变得无限轻松。

Charles is loaded with features, so much so that it becomes confusing.  I'm hoping to make that more simple for you; in this post I will walk you through file replacement for the purpose of remote debugging of web apps.

Charles拥有许多功能，以至于变得混乱。 我希望对您来说更简单。 在这篇文章中，我将引导您完成文件替换，以远程调试Web应用程序。

*Charles is a paid app which provides a 30 day trial.  I've not been paid or even asked to endorse Charles; it's the tool I use for remote debugging so I've chosen to write about it.*

*Charles是一款付费应用，可提供30天的试用期。* *我没有得到报酬，甚至没有要求我认可Charles；* *这是我用于远程调试的工具，因此我选择编写它。*

Charles can do just about everything but we're going to limit this post to solving one frequent problem:  swapping out a remote file for a local file that we can substitute, thus allowing us complete control over its contents and allowing us to an opportunity to fix any problems!

Charles几乎可以做所有事情，但是我们将把这篇文章限制为解决一个常见问题：将远程文件替换为可以替换的本地文件，从而使我们可以完全控制其内容，并有机会解决任何问题！

## 远程调试 **(**Remote Debugging**)** ##

To swap out a remote file for a local file, the first step is using the Charles menu and choosing *Tools>Map Remote*.  The *Map Remote Settings* window pops up with a listing of remotes you've defined; to add one, click the "Add" button and you'll see the following screen:

要将远程文件替换为本地文件，第一步是使用Charles菜单并选择*Tools> Map Remote* 。 弹出“ *地图远程设置”*窗口，其中列出了您已定义的远程列表。 要添加一个，请单击“添加”按钮，您将看到以下屏幕：

![Charles Proxy][]

The top block is for remote file settings and the second block is for your local substitution settings.  This means your file must be "served" (not using the `file://` protocol); you can use [Python][] or [Node.js][] to easily serve a directory.  Assuming you're serving the file, you'll enter the remote URL settings first, followed by your local settings.  Here's an example:

最上面的块用于远程文件设置，第二个块用于本地替换设置。 这意味着您的文件必须“提供”(不使用`file://`协议)； 您可以使用[Python][]或[Node.js][]轻松提供目录。 假设您要提供文件，请先输入远程URL设置，然后输入本地设置。 这是一个例子：

![Charles Proxy][Charles Proxy 1]

The screenshot above shows me replacing a production MDN `.js` file with a local file.  To ensure the local file is being used, place a special `console.log` call at the top of the file and ensure the message is within the console.

上面的屏幕截图显示了用本地文件替换生产MDN `.js`文件的过程。 为了确保正在使用本地文件，请在文件顶部放置一个特殊的`console.log`调用，并确保消息在控制台内。

This is just one of the simpler features that Charles provides but it has made my life much, much easier.  Debugging remote applications went from impossible to effortless after inputting a few rules into Charles.  If you have a good method for accomplishing this without Charles, I'd love to know, please share!

这只是Charles提供的简单功能之一，但它使我的生活变得非常轻松。 在向Charles输入一些规则之后，调试远程应用程序从不可能变为轻松。 如果您有没有Charles的好方法，我很想知道，请分享！

> 翻译自: [https://davidwalsh.name/remote-debugging][https_davidwalsh.name_remote-debugging]

charles proxy

[Charles Proxy]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9DaGFybGVzRGVidWdTY3JlZW4ucG5n?x-oss-process=image/format,png
[Python]: https://davidwalsh.name/serve-directory-python
[Node.js]: https://davidwalsh.name/serve-directory-nodejs
[Charles Proxy 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9DaGFybGVzRGVidWdQb3B1bGF0ZWQucG5n?x-oss-process=image/format,png
[https_davidwalsh.name_remote-debugging]: https://davidwalsh.name/remote-debugging