How does GMail display the sidebar? - gmail

You know, like the "Compose Mail," "Inbox," "Sent Mail," etc., on the left hand-side when you load up GMail? I did a search for "Compose Mail" in the page source and got nothing.

The Gmail interface uses JavaScript to dynamically load a lot of stuff. That explains why you don't see "Compose Mail".
If you want to see how the final HTML document looks like, then here is my method:
Install the "Web developer" Firefox extension
Click Tools> Web Developer> View Source> View Generated Source

It's all Javascript. Here's how you can get at that information yourself: if you don't already use Firefox, download it, and then install the Firebug extension. Among other features, it'll let you click on any component of the page and show you the corresponding location in the source - not just the original page source, but the source after all the Javascript has taken effect.
Actually, if you use Internet Explorer, the IE Developer Toolbar (included in IE 8) does something similar, although I haven't used it much myself.

Related

How to open a browser within VSCode just like another editor tab

For a VSCode extension i want open browser within VSCode not externally, wherein i can load some URL (https://developers.redhat.com/)
I tried looking into various options to achieve it in VScode extension, what i came across is with help of webview i.e 'vscode.previewHtml' we can pass html content which would be rendered with in VSCode editor tab, but what i have is url to load. Can pass it to iframe but i can't open it in iframe
Another option is to open it in browser but it opens external browser.
what i need is to open a browser within IDE (VSCode), experience should be similar to what we get for 'vscode.previewHtml'
or as we see in IDEs like eclipse where browser window is opened right inside IDE.
As we can see below
Please give inputs, suggestions
It's possible now without extension. Open command palette (CTRL+P) and search for "Simple Browser: Show".
This is how it looks:
In order to render your html you can use the WebView API:
https://code.visualstudio.com/docs/extensions/webview
Microsoft has an extension in development, Live Preview. I use it to view html codecov reports inside of VSCODE and it at least works for that.
You just search for it in extensions and add it to VSCODE

how to get the debug information for chrome extension

I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.

Is the same htm source edit extension available on windows?

I'm looking for the chrome extension that allows you to edit html source and instantly view the result. See the screenshot for mac, perhaps there is no such software available for windows version of chrome, but I would appreciate the mac version reference too.
There is already this kind of tool built in to Chrome. If you right click on HTML page and select "Inspect Element" you can make your changes and Chrome will update itself automaticly.
If you don't like this feature however and want one that looks beter, check out this link. I'm almost certain there will be some results that you like.
https://chrome.google.com/webstore/search-apps/Editor
I'm terribly sorry, this is NOT a chrome plugin, but node.js application https://github.com/phuu and this is really good one see the screen

How to detect view-source scheme in Chrome Extension

I wish to run a content script when viewing the source of any web page. (and have a page action icon appear)
The docs here don't mention view-source as a valid scheme.
Is there a way around this limitation?
You cannot insert a content-script into view-source: pages. I didn't found a detailed explanation, but here is the related commit.

Dreamweaver CS4 - How do you preview in Browser?

I'm new to Dreamweaver CS4 and making my first website. I've watched a lot of tutorials and they all just click the Preview in Browser button and they can see what their page looks like in Firefox/IE/etc.
But when I click Preview in Browser a new Firefox window opens up and it goes to my homepage and that's it.
What do I need to setup in order be able to preview in firefox?
THANKS!
I don't use Dreamweaver, although I have it as part of CS4. But I just now opened up the app, created a test HTML page, saved it, and hit F12 (Preview in Browser). And there was my test page. I honestly don't know what you could be doing wrong. I thought it might be that you didn't save your file, but you get a warning dialog if you try to preview without doing that.
After some playing around I fixed the problem myself.
First I had to go to manage site and edit the basic preferences on my website.
I had to make sure the 'URL to browse to the root of your site" is valid.
In my case it I had to add:
file:///C:/Documents%20and%20Settings/Linda/My%20Documents/website1/

Resources