Troubleshooting object inspector in Blogspot preview

I don't know how you, but I do use frequently the CSS/JavaScript debugger in the browser, and it bothers me a lot when I see situations, sites, pages where I'm unable to use it easily. Blogspot page preview is the such case - they intercept click events on the pages while showing me preview page, and as a side effect of this interception Chrome debugging tools are unable to show me information about selected object (because click is not real click here).
If you open preview page and invoke debugger tools, CSS inspector (Ctrl+Shift+I), and try to select the reading area you will probably fail here...

You will probably select the object which cover whole reading pane, and which "coincidentally" has CSS class "Blogger-clickTrap". Taking into account the intention of this div box has been added there I prefer to get rid of it. Yes, just delete this node in the DOM tree in the left:

Since now on you have 2 nice side effects:

• CSS debugger object selector is able to work again;
• and click events are properly working for all JavaScript on the page.

That's the desired effect we wanted to return.

Troubleshoooting Blogspot embedding problems

Let imagine you carefully writing longish blog post, which you've accompanied with a number of embedded videos from Yandex.Video or slides from SlideShare. But eventually you want to see your blogpost preview, and OMG, all this embedded content gone! Nothing is visible, only silly boxes.

What the heck? No problemo - all browser problems should be properly logged to the the browser log. For the Chrome it would contains those entries:

Do you see the problem? You are watching this preview page via https:// protocol, but embedded content is using http:// instead. This could be fixed 2 ways:

• You properly craft embedded blocks and change URIs mentioned to use default protocol of the page
• or simply change preview page address from using https:// to http:// leaving all other tokens intact...

 Viola!