A Log of Coding Solutions
Firefox displayed this warning in the Firebug console. This warning indicates an absolutely positioned does not consider a table element relatively positioned so it may not appear as expected. A better explanation is here:
https://www.sencha.com/forum/showthread.php?289315-Relative-positioning-of-table-rows-and-row-groups-is-now-supported.-This-site-may-nee
and solution to fix is here:
http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements
In a website that gets fonts from Google’s CDN, the browser window loading icon continuously runs. In Firebug you can see that the WOFF file from google is the culprit.
Turn off Firebug. Apparently it’s a problem with Firefox/firebug that causes this issue. Once you turn off firebug the website loads and no loading icon is shown. The issue may be related to this, but not sure: http://code.google.com/p/fbug/issues/detail?id=4649
keywords: google woff firefox error
Since Safari 3.x, you can now have a firebug-like tool in Safari. Either open terminal and copy-paste the line below or edit the plist file here ~/Library/Preferences/com.apple.Safai.plist.
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
Most websites stop there saying “you should now be able to right click and see the ‘Inspect Element’ in any contextual menu”. Well, I didn’t. I had to show the developer menu. Here’s how to show the developer menu straight from Safari help:
open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”
Once you do that you should be able to see “Inspect Element” in the right click menu.
source: http://macdevelopertips.com/defaults/firebug-like-tools-in-safari.html
keywords:firebug safari
I have a div with id “stripe” that is using absolute positioning to be at the top of the page and span 100% of the page width. It overlays the top part of the website. The rest of my page is 1000px wide. When viewing on the iPhone, the “stripe” div is only a portion of the screen width. Why?
If you debug the website for the iPhone, you’ll see that the width of the “stripe” dive is only 320px. Sound familiar? That’s because the width of the iPhone is 320px and so 100% of the viewport is 320px according to the iphone. There are many possible solutions for this. One solution is to make the “stripe” div’s position relative. The relative allows the 100% width expand the entire 1000px . Then in the following div set the margin-top to negative of whatever the “stripe” div’s height is.
I created a website that looked great in IE7+, FF, Chrome, and Safari, but on the iPhone a few things looked off. Problems could be from the viewport being 480px wide but the website is 1000px wide so using percentages can mess it up… that’s another post sorry. The problem is, how do I use something like firebug to debug the css and html in the iPhone mobile Safari browser?
The best solution is if you have a Mac OS X and the iOS 5 SDK. If you don’t have a Mac or you don’t have iOS5 SDK and don’t want to download it from the Mac App Store, move on to the next solution. This solution involves a great FREE tool to debug, profile, and inspect web applications running in the iPhone simulator is iWebInspector by Max Firtman. This tool, as it says in the tool, enables a private API available on the iOS 5 framework. It lets you inspect the web page or webapp similar to firefox. To use it:
One thing annoying is that you can’t add CSS attributes to existing CSS classes. A way around this is to add attributes to the element.style section for the element you want to alter. Another thing I noticed is that the Simulator freezes from time to time. To “unfreeze” it I had to quit both the simulator and iWebInspector and start over. Other that it’s great!
A second option to debug a website in the iPhone is by using Firebug Lite. Here’s what you do:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
I prefer the first solution over this one because obviously, Firebug is very small on the iPhone.
keywords: iphone safari on desktop, iphone firebug
sources:
http://www.iwebinspector.com/
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
I don’t know how I used to develop web pages before Firebug. It is the single best tool you can have when debugging a webpage. If something doesn’t look right I open Firebug and find out what styles are being inherited. If some javascript functionality is not working I open Firebug and enter debug statements. If some ajax call is messing up and the page isn’t showing the response correctly, I open Firebug.
The best thing about Firebug is how much time it saves you on debugging. Even better than it being free. That’s a lot considering how I watch my money. I only use Firebug with Firefox. It can be downloaded at https://addons.mozilla.org/en-us/firefox/addon/firebug/. What’s good is that it’s available on both Mac and PC. Just click on the Add to Firefox button and it’s mostly done for you. That easy. A firebug was also developed for IE but I haven’t tried it recently. I tried it a couple years ago and it didn’t help me very much so I stuck with just using the Firefox one.
When you need to see why an item on a webpage is not showing as its supposed to you can right click on it and select “Inspect Element”. Doing this opens up the firebug window and it will tell you exactly what styles are being applied to it and what styles have been overwritten. You can even change the values of anything you want to see the outcome in real-time.
Browsers can tell you the last error code that happened, but firebug can let you watch expressions, look at the stack, insert breakpoints, and print out statements in the console.
Any and all requests to the server can be inspected on the Net tab. You can see each javascript include file, each image, each ajax request. This means that if an ajax call goes wrong, you can inspect the parameters that were sent and the response the page got back from that request. It makes debugging a breeze.
Firebug can be downloaded here: http://getfirebug.com/