So we have reached that stage in a web dev project where we need to see how things look in IE.
Sigh.
So the fabulous Firebug is not available for IE. But a lite version is - as a bookmarklet, and is apparently compatible with IE6+. But how the how the hell do I add a bookmarklet to IE8?
I am unable to drag and drop to the Favourites bar (is this the same as bookmarks?). I can't add it through the Favourites add option as it contains "illegal" characters.
So how do I do this? All I want to do is inspect the DOM.
Thanks
this is how I did it (IE 8.0.7600.16385 on Win7):
Go to some Firebug Lite page (http://getfirebug.com/firebuglite).
Click the "add to Favorites Bar"
button on the Favorites Bar.
This
will give you a bookmark to
http://getfirebug.com/firebuglite.
click on the "Firebug Lite" link in Firebug Lite page (http://getfirebug.com/firebuglite).
properties poup will be open. Copy the URL within the popup
Right click on your new bookmark and choose Properties.
Paste the URL into the URL box and close.
If you hover over the new bookmark, it should show javascript:(function(F,i,r,e,b,u,g,L,I,T,E)... etc instead of the link.
Please use this in your jsp
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
and you are done.
Related
I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through
I want to make my jQuery-UI-using webpage themeable with the Themeroller Firefox bookmarklet. When I open the bookmarklet on the themeroller demopage, everything changes like expected. On my own page, or on other example pages only the URL changes but the style isn't applied.
I need the developer tool, to find the final style of jQuery-UI in my existing webpage. How can I get that working?
I used Firefox and I put my page on a webserver, so no Firefox doesn't apply local security restrictions.
I had the same issue. This link solved my problem.
To summarize: something is not playing nice with versions of FF above version 10.
To fix: right-click your bookmark for "ThemeRoller Dev Tool", go to 'Properties'.
Change 'Location:' to this -->
javascript:(function(){if(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert("Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox");return%20false}else{if(window.jquitr){jquitr.addThemeRoller()}else{jquitr={};jquitr.s=document.createElement("script");jquitr.s.src="http://jqueryui.com/themeroller/developertool/developertool.js.php";document.getElementsByTagName("head")[0].appendChild(jquitr.s);var%20a=function(){jquitr.reloadCSS=function(){var%20c=jquitr.getHash(),b;if(jquitr.trString!==c&&c!==""){jquitr.trString=c;b='<link%20href="http://jqueryui.com/themeroller/css/parseTheme.css.php?'+c+'"%20type="text/css"%20rel="Stylesheet"%20/>';if($("link[href*='parseTheme.css.php'],%20link[href='ui.theme.css']").size()>0){$("link[href*='parseTheme.css.php']:last,%20link[href='ui.theme.css']:last").eq(0).after(b)}else{$("head").append(b)}if($("link[href*='parseTheme.css.php']").size()>3){$("link[href*='parseTheme.css.php']:first").remove()}}window.setTimeout(jquitr.reloadCSS,1000)};jquitr.reloadCSS()};window.setTimeout(a,1100)}}})();
Then 'Save'. This solved it for me.
I've put the HTML draft of the theme so far, with minor CSS edits.
Currently I have all the block posts and everything else that's essential to a tumblr theme but I can't seem to get the {HasPages} block to work properly.
I've tested it on a different tumblr, also. There are pages created and I already have provided some basic CSS for it just in case. But there isn't anything showing up.
Has anyone has this problem and if so, is there a solution I'm missing? The code to display the pages is included.
{block:HasPages}
<ul>
<li>Home</li>
{block:Pages}<li>{Label}</li>{/block:Pages}
</ul>
{/block:HasPages}
Also, is this a valid web masters' question. I'm not sure.
I just had this issue: a link to a page I created didn't show up.
I solved this by checking off "Show a Link to this Page" in the Page options. To find this:
Go to tumblr.com.
In the top navigator click the gear. This is where the settings are.
On the side, click on the blog you want to customize.
A customize button should show up beside the name "Theme". Click on this button.
Now your blog will show up with a Customize panel. In the Customize panel there should be a Pages section. Click the Edit button beside the page and a window will pop up.
You can find the "Show a Link to this Page" option in this window.
Let me know if you need any clarification.
As far as I can see your code is right. Have you clicked the 'show a link to this page' checkbox, which is at the bottom of the page edit popup? I bet that's it... :)
I have also been having this problem. However, everything works correctly on my actual page, even though the theme editor does not appear to be aware of the block on my custom theme, nor does the theme preview seem to be aware of the pages tagged to show.
Have you tried saving your theme and checking the links on the live page?
If using Firebug, we can click on the HTML tab, and click to expand each element to see the generated HTML code. Is there a way to expand it all or get a plain text file?
I just accidentally found out that there doesn't even need to be Firebug. We can just press CTRL-A (to select all) on the webpage, and then right click and choose "View Selection Source", then we will get a plain text file of the "current HTML code", even will see a <div> that is the Firebug panel that is before the <body> tag if Firebug is open. But it seems like a weird way to invoke this. Is there any other way?
(Update: generated HTML usually refers to the HTML after JavaScript changes the DOM. It is the current DOM tree instead of the original source code)
In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.
Without Firefox Add-Ons, you could use a bookmarklet like this:
javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
With the Web Developer toolbar add-on, select View Source - View Generated Source. And if you want to view the original source, select View Source - View Source (or simply press CTRL-SHIFT-U)
Using the Firefox DevTools (integrated in FF since version 35) you can view the generated HTML opening the web inspector (CTRL-shift-C) and selecting the HTML tab.
You can copy the generated HTML by right clicking on <html> and selecting Copy inner HTML.
If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.
I don't know if I understood your question well, but here is something really simple and you won't need another addon.
Every browser has a native function to view the source-code of the actual page, just right-click and look for something that resembles "source" or "code".
In Firefox for example it's just "Souce-code", in Chrome it is "View Page Source" and so on.
That being said, Web Developer toolbar is indeed a great addon, especially if you do CSS too.
I've created a bookmark in Firefox that links to a hosted web application I've written and displays the application in the sidebar using the "Load this bookmark in the sidebar" option.
When the application appears in the sidebar and I click links there, those links open in the current Firefox tab rather than staying in the sidebar. I would like the linked page to appear in the sidebar.
I'm hoping there's a simple solution, like setting the default target via a base tag, but I can't find a reference that gives me the information I need. It would be useful if the solution does not limit the application to the sidebar exclusively, and still lets the application run full-window.
I think all you need to do is link, or add target="_self"
This may be more a potential workaround than a real answer, but you could try using javascript to change document.location to the new URL. Something like:
<a href="javascript:document.location='http://whatever'>click me</a>
This would use the same 'window' object to display the new page and should load in the sidebar.