{"id":32715,"date":"2016-02-16T10:08:34","date_gmt":"2016-02-16T04:38:34","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32715"},"modified":"2016-02-16T10:08:34","modified_gmt":"2016-02-16T04:38:34","slug":"remote-debugging-with-charles-proxy","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/remote-debugging-with-charles-proxy\/","title":{"rendered":"Remote Debugging with Charles Proxy"},"content":{"rendered":"<p>The most difficult part of supporting apps when you don&#8217;t create them and don&#8217;t have access to the source code is debugging them. Charles allows to\u00a0intercept calls to remote CSS and JavaScript files and\u00a0substitute your own, allowing for infinitely easier\u00a0debugging of remote code that you don\u2019t have access to change.<\/p>\n<p>Charles is an HTTP proxy sitting between your browser\/ apps and the internet. <em>Charles is a paid app which provides a 30 day trial.<\/em><\/p>\n<p><strong>Remote Debugging<\/strong><\/p>\n<p>Swapping out a remote file with a local file that we can substitute, thus allowing us complete control over its contents and providing us with an opportunity to fix any problems.<\/p>\n<p>To map remote file for a local file, the first step is using the Charles menu and choosing\u00a0<em>Tools&gt;Map Local<\/em>. The\u00a0<em>Map Local Settings<\/em>\u00a0window pops up with a listing of locals you&#8217;ve defined; to add one, click the &#8220;Add&#8221; button\u00a0and you&#8217;ll see the following screen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32716\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/charles-local.png\" alt=\"charles-local\" width=\"558\" height=\"542\" \/><\/p>\n<p>The top block is for remote file settings and the second block is for your local substitution settings. \u00a0 Assuming you&#8217;re serving the file, you&#8217;ll enter the remote URL settings first,\u00a0followed by your local settings. \u00a0Here&#8217;s an example:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32717\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/example.png\" alt=\"example\" width=\"551\" height=\"437\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-32718\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/02\/mapped.png\" alt=\"mapped\" width=\"903\" height=\"727\" \/><\/p>\n<p>The screenshot above shows replacing a production hero image file with a local.<\/p>\n<p>This is just one of the simpler features that Charles\u00a0provides but it has made life much, much easier. \u00a0Debugging remote applications went from impossible to effortless\u00a0after inputting a few rules into Charles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The most difficult part of supporting apps when you don&#8217;t create them and don&#8217;t have access to the source code is debugging them. Charles allows to\u00a0intercept calls to remote CSS and JavaScript files and\u00a0substitute your own, allowing for infinitely easier\u00a0debugging of remote code that you don\u2019t have access to change. Charles is an HTTP proxy [&hellip;]<\/p>\n","protected":false},"author":888,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32715"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/888"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=32715"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32715\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=32715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=32715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=32715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}