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

Vertical reordering of blocks with CSS or How to swap two elements using CSS

It’s old trick for search engine optimization (SEO). As far as we all know, search engine parses web page and prioritizes key words founded on the page. And words that are in the beginning of the page have more priority, it’s obviously because usually in the beginning of the page is header that should describe content below.

So the obvious search engine optimization is to arrange all key words in the beginning of the page. But it is completely not cool for Design. That’s why we need to replace two blocks: block with key words should be in the beginning of the markup, but on UI it should be under the next block with page’s content.

So we got something like this

<div class="block">It is content needed for SEO, but it's not very interesting for user</div>
<div class="block">Really good and interesting for user content, but it's waste for search engines</div>

and we need to swap these two blocks on UI.

First of all we need additional wrappers, so lets modify markup to something like this:

<div class="wrapper">
    <div class="bottom">
        <div class="block">It is content needed for SEO, but it's not very interesting for user</div>
    </div>
    <div class="top">
        <div class="block">Really good and interesting for user content, but it's waste for search engines</div>
    </div>
</div>

And here is the magic:

.wrapper {
    display: table; 
    width: 100%; 
}
.top {
    display: table-header-group; 
}
.bottom {
    display: table-footer-group;
}
/* next style is not really necessary, just to show borders of swapped blocks */
.block {
    border: 1px solid black;
}

Here is the proof link http://jsfiddle.net/UJWP4/1/

Some words about browsers support – this approach works fine in IE8+ (not supported in ie7)

Social Share Toolbar