Posted on

Chrome remote debugging on ios 6 (iphone 5)

Let’s dig into chrome remote debugging on ios 6 (iphone 5)

1. First of all we need to configure fiddler as a proxy
open fiddler->tools->fiddler options-> connections: set port to 8888, check “allow remote computers to connect” (google how to set up fiddler proxy for details)

2. configure iphone:
open command line on your desktop and type “ipconfig” to figure out your local ip
open settigns on iphone->wi-fi->current active network settings: scroll down, set proxy to manual and fill in proxy ip (ip from previous point and port 8888)

3. check that iphone is using your desktop as a proxy
just open any page in chrome on iphone and check fiddler out

4. install nodejs (click install here http://nodejs.org/)
check installation with the following commands:

node -v

I got something like – “v0.10.17”
then check that npm has been also installed

npm -v

I got something like 0 “1.3.8”

5. configure local server for files
e.g. we can add to hosts file “127.0.0.1 mydomain.com”
and set up new IIS site for this domain, so we got this page “http://mydomain.com/mypage.html” mapped on local env

6. configure local page – we need to add this script to our local page

<script src="http://mydomain:8080/target/target-script-min.js#anonymous"></script>

7. run weinre – run from console

weinre --boundHost mydomain.com

should respond something like “2013-08-26T13:31:58.109Z weinre: starting server at http://mydomain.com:8080”

8. open debugger
open this link http://mydomain.com:8080/client/#anonymous

9. open page on a mobile device – open page with weinre script – http://mydomain.com/mypage.html

10. check out desktop chrome with opened http://mydomain.com:8080/client/#anonymous – this debugger should be attached to the page opened on iphone

11. Thats all

P.S.
some helpful links:
http://people.apache.org/~pmuellr/weinre/docs/latest/Installing.html
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

Social Share Toolbar
Posted on

Fiddler’s custom rules – how to replace protocol or domain in fiddler

Almost every web developer had to deal with Fiddler – very useful utility for investigation and debugging everything connected with network. There is one additional point for “Fiddlers’ flexibility”, for case when you want to do something that couldn’t be done via fiddler’s UI. This point is “Fiddler’s custom rules”

First of all it will be useful to install FiddlerScript Editor http://www.fiddlertool.com/fiddler/fse.asp
It’s really necessary tool (at least due to the intellisense)

How to edit custom rules: open Fiddler, select “Rules” in the top menu, then choose “Custom rules” (or you could use Ctrl+R hot key to open editor)

Two simple examples:

1) Replace protocol from http to https for defined Domains.
Open “Custom rules”, find this method

static function OnBeforeRequest(oSession: Session)

add to the beginning of the method the following code:

// Custom rules:
if (oSession.HostnameIs("mikitamanko.com") 
    || oSession.HostnameIs("google.com") 
    || oSession.HostnameIs("bing.com")) {
    oSession.fullUrl = "https" + oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));
}

This will replace protocol for sites listed in code.

2) Replace one domain name to another (for all requests to first one)
Add to “OnBeforeRequest” method the following code:

if (oSession.HostnameIs("google.com")) {
    oSession.hostname="mikitamanko.com";
}

This code will redirect all traffic from google.com to mikitamanko.com.

It is really powerful stuff, for additional details please follow this manual http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp

P.S. also you can modify headers or body of response/request, very useful stuff.

Social Share Toolbar