Category: HTML


Another Simple console.log wrapper – debug log for all browsers

February 18th, 2012 — 9:22pm

Issues:

1. You can add console.log all day long but at the end of the day you have to remove them.

2. When testing on IE, you got to comment out or remove console.log otherwise it will error out.

3. for IE, you might end up adding Alert(msg). Clicking Alert could become painful.

Solution (might not be the best but works):

So I wrote Another simple console.log wrapper that meets what I need for now (super super simple)

Out put on IE would look like this:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Fun with Debugging</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<style type=”text/css”>
.console{
font-family:monospace;
font-size:12px;
color:white;
background-color:black;
padding: 0 0 0 10px;
}
</style>
</head>
<body class=’body’>
<h1>Header</h1>
<p>contents here</p>
</body>
<script>
var debug = {
debug: false,
log: function(msg){
if (this.debug){
if(window.console){
console.log(msg)
}else{
$(‘body’).append(‘<div class=”console”>’ + msg + ‘</div>’);
}
}
},
enable: function(){this.debug = true},
disable: function(){this.debug = false}
}

debug.enable(); // remove or comment out before send to prod or just remove all debug. line with grep or something
debug.log(‘ahoy’);
debug.log(‘more message’);
// debug.disabled();
debug.log(‘debug is disabled now’);
</script>
</html>

Comment » | HTML, JavaScript, Web Development

Know how to use Chrome developer tools I – Disable Cache

January 29th, 2012 — 2:50pm

1. Open Web Developer Tools
(Option + Command + i) or (Menu > View > Developer > Developer Tools

 

 

 

 

2. Disable Cache

2.1. Go to Settings

2.1.1. Click Gear icon on lower bottom

2.1.2. Check Disable Cache

 

Comment » | HTML, JavaScript, mac, OS X, Web Development

HTML5 Offline Application – Debug Manifest

January 31st, 2011 — 5:16am

There are many good tutorial out there to test/experiment offline application such as Dive Into HTML5. In theory, if you follow the instruction, your sample offline application can be up and running in no time. However, that wasn’t the case for me and wanted to share this experience and hoping that this might help someone else out there who is about to pull their hairs.

Debug 1: Did I set web server correctly so that manifest can be served as manifest?

To test this, you can simply run cURL as follows from terminal

curl -I url_to_your_manifest

If you see content type returned as text/cache-manifest, you are good. So this is not the problem…

Debug 2. It doesn’t seems to be all the items on manifest are downloaded successfully…

This really almost killed me. I was using FF and Safari. I know it download something but not quite complete… I used script provided by Jonathan Stark to debug. The script indicates that I might will need to check manifest.

Safari Console

Safari Console

Spent quite long time to make sure everything seems to be correct… still something wasn’t quite right…. I then decided to use chrome and wow… I know exactly what file is the cause. Chrome console shows progress as shown below.

Chrome Console

Chrome Console

I finally got all the files right and now my application runs locally just fine. Yey!

In Summary, here is the list of things that you want to check for manifest/directory:

1. is file name/path correct? (case sensitivity) – to avoid this error, perhaps you should write a code to generate manifest.

2. Does it have right permission? – to avoid 403 error, perhaps you should re-apply permissions once you move the files.

That’s it for now… Now I will need to convert server side code in JavaScript to function locally.

Comment » | HTML, JavaScript, Mobile Web App

Yey, Android Emulator on my MacBook Pro (OS X 10.5)

January 15th, 2011 — 10:01am

I got mobile Web Application using jQTouch and this has been tested for iPhone (iPhone simulator and my iPhone). Looking REALLY good and thanks to jQTouch, the implementation was so easy!

Now I wanted to test with Android so I followed instruction provided by Nick Nelson and also referenced Installing the Android Development Environment article from MOTODEV.

1. Download Android SDK for Mac OS X (intel) http://dl.google.com/android/android-sdk_r08-mac_86.zip
2. I copied mine to Macintosh HD: Developer: android-sdk-mac_86
3. Install android-sdk updates
3.1 Open terminal and run (takes a while… a min or two):
$ /Developer/android-sdk-mac_86/tools/android update sdk
then update starts. take a while (i think it was like 3 to 5 min)
4. Download and install Eclipse Classic 3.6.1: http://www.eclipse.org/downloads/
5. Specify Location of the Android SKD for Eclipse
5.1. Open the Preferences dialog
5.2. On the left side of the Preferences dialog, click Android.
5.3. In the SDK Location field, specify the directory that contains the Android SDK. My case is: /Developer/android-sdk-mac_86
6. We are all set: ready to launch.
6.1. Eclipse >> Window >> Android SDK and AVD Manager
6.2. Click New >> Create new AVD window opines
6.3. Name: name your device!
6.4. Target: Android 2.1-update1 – API Level 7
6.5. SD Card: 1024 MiB
6.6. Skin: Select any skin you like (please see image below for a few skins)
6.7. Click “Create AVD” – this will take a moment (it gave me rainbow for my case)
6.8. It will be listed in Android Virtual Devices list on Android SDK and AVD Manager window.
6.9. Select the device and Click “Start” >> “Launch” (it will take a while to launch)
HVGA400

HVGA400

WVGA853 Skin

WVGA853 Skin API Level = 7

Default HVGA Platform 2.3 API Level 9

3 comments » | HTML, JavaScript, Mobile Web App

Hex in HTML Randomly…

December 11th, 2010 — 8:42am

My web application does screen scraping to do some work.

One Monday, the returned page started to contain CR+LF+someHex+CR+LF. When I use cURL all is just fine but when I used Internet Command provided by 4D this sets of characters (CR+LF+someHex+CR+LF) was randomly inserted to returned HTML page.

What I end up finding out was that:

1. the web site I was accessing must have enabled chunked transfer encoding on their web server on “One Monday” or over the weekend.

2. The chunked encoding modifies the body of a message in order to transfer it as a series of chunks

3. chunked body contains chunk size which is represented in HEX (ah…) and the way I was receiving this page did not understand this encoding…

Solution?

Well I could re-write this with cURL that’s the best way to go and I will do that when I have a chance.

Since chunked encoding is only available in HTTP version 1.1. changing the version to 1.0 in request header solved this problem for now…

Comment » | HTML

Back to top