Remote Debugging Intex Cloud Fx. (Firefox OS) using ADB and WebIDE on Firefox

Recently Mozilla's Firefox OS came to India with the brands Intex and Spice. If you are a developer and trying to test apps or debug your phone using ADB then you might have had a hard time. The official tutorial on Mozilla Developer Network just have listed the basic steps, but to make our Intex device work we need to get our hands somewhat dirty in code.

This guide is meant for Windows users only. Alternatively you can use the vendor ID for the Intex Device if you are on another system and just need the vendor ID.


Before we start, we need to have the following things:

1. ADB and Fastboot - ADB is included in the official Android SDK, but it is about 800mb, and for one simple application downloading the whole heavy SDK wouldn't be a nice idea. So download this 15 Seconds ADB Installer from the link and install on your system.
   
2. Mozilla Firefox 35+ - Currently Mozilla Firefox 35+ is a Nightly Build. But if you don't want to download an 80mb thing again, you can alternatively use the latest Mozilla Firefox which has the App Manager.
   
3. ADB Helper Addon - Install the ADB Helper on your Mozilla Browser.

For now we just need these two things in order to get start. 

You need to learn a little bit about using Windows Command Line and ADB. If you know about how to use them you are all set to go!

Connect Your Device

Connecting your device is more than just plugging the USB cable. We need to make some changes on our device so it works without any problem.

Disable Screen Lock

If you have screen lock enable on your device, simply disable it by going to  Settings > Screen Lock (Under "Privacy and Settings")

Enable Remote Debugging

Disable USB Storage in your devices' settings before you enable remote debugging.

Now you need to enable remote debugging in the settings of your phone. Go to Settings >  Device Information > More Information > Developer > And under "Remote Debugging" choose "ADB and Devtools"

We Need USB Drivers for our Device

For ADB to detect our device Intex Cloud Fx. it needs its OEM USB Driers, but the problem is that Intex doesn't provide it, so bad.

But we have got a workaround. By specifying the vendor ID in the adb_usb.ini file in the ADB application directory we can get our device connected to ADB. Here's how:

The vendor ID of our Intex Cloud Fx. Device: 0x1782

Download this file: adb_usb.ini (Dropbox) 

Where to save it? C:// drive > Users > {username} > .android > Paste the adb_usb.ini file there.

Start ADB

Open the "RUN" window by pressing 

Window + R then type "cmd" and hit enter to open the command prompt window.

Now you must connect your device using an USB cable with all the settings mentioned above.

We are now ready to see if the devices is connected to ADB or not. Run the following command and see what it returns:

adb devices

If successful it will show something like:

If not, then you must try unplugging and then plugging the USB cable. Also try it on different USB ports too and check if you have done everything mentioned in the "Connect Your Device" section above.

Now we need to tell ADB to forward the port to the WebIDE or App Manager on Firefox browser to actually get started with debugging. To do that run this command:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

You are done! Continue to the final step.

Open Firefox Browser (with either App Manager or WebIDE)

First let's clear the confusion between App Manager and WebIDE, on Firefox 33 and prior App Manager is the default app to manage and debug apps on Firefox OS, and in later version WebIDE replaced the App Manager.

See:
    WebIDE Documentation
    Using the App Manager

I am going to provide instructions for both application. The overall functionality of both the apps are similar, except for that WebIDE is newer it has more updates than the previous App Manager,

Connecting your device with WebIDE

Open your Firefox browser. Go to Tools > Web Developer > WebIDE or simply hit Shift + F8.

Now in the WebIDE Interface, click on the dropdown on the right that says "Select Runtime", if you can see "Cloud Fx." under the USB Devices, then simply click on it and it will get connect.

Else click on "Remote Runtine" and enter the port as localhost:6000 and the WebIDE will be connected to the device. If it succeeds the icon will turn blue and you can access the apps in your devices on the left pane of the user interface.

Now you can debug apps, install your own apps on the device remotely.

Connecting with App Manager

The process is pretty much the same. Connect your device with the adb command prompt first. Then open Firefox browser.

Go to Tools > Web Developer > App Manager 

At the bottom of the screen, you will see the device id in the list of connections available. Click on it and the device will be connected to the app manager.

When connected you will see something similar to this:

Yay! We are done. Now debug the way you want, but just don't damage your phone ;)

Fun things to do!

You can debug system apps like Gallery, Camera etc. And you can edit the HTML, CSS or JS of those apps live and can see the result on the device screen.

If you know HTML/CSS/JS you can really have fun tweaking things on your device. That wouldn't be permanent, as once you close and re-open it will go into its original state.

But you can create your own apps and install it on the phone. 

Confirm Friend Request on Facebook All At Once

Popular on Facebook? So you have got 100s of friend requests pending on your Facebook profile, confirming them one by one can be a pain. This small block of JavaScript code can save you time and energy.


Before we start I want to tell you that it's not guaranteed this code might work in the future. If Facebook's website structure changes, there's a possibility that this code might become obsolete, but that doesn't mean you can use a script to do that, we will work on a new script and update it on the blog.

Last Tested: 28 September 2014 (Works)

But for now this code must work perfectly for confirming all the friends request at once. Login to your Facebook profile and go to the friend requests page where you can view your pending friends requests, use either Mozilla Firefox or Google Chrome or Safari.

Keep showing up more friend requests pending by clicking on "Show more" button until you reach the end.

The Magic Charm (JavaScript Code)

var confirmBtns = document.getElementsByTagName('button');
for (var i = 0; i < confirmBtns.length; i++) {
    if (confirmBtns[i].innerHTML == "Confirm") {
        confirmBtns[i].click();
    }
}

Copy the JavaScript code

Now Run The Code

We assume you have the code snippet on your clipboard, copied. Now you need make use of the developer tools in the browser.

Developer tools are small set of tools use to debug web sites. To learn more about using developer tools see - How to open developer tools.

To open Developer Console

Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox) to open the JavaScript Console.

Paste the code in the console and press enter to run the code. If done correctly your pending friend requests will get confirmed one by one in a matter of seconds.

Note: Facebook might show up a big warning message to do not copy-paste codes and tell you it might be scam and yes never ever run suspicious or codes not from trusted sources in the console, the scripts can do malicious things on your Facebook account. 

Easiest Way To Use WhatsApp on PC

Using WhatsApp on PC has been really a hot topic, one obvious answer is to use an Android emulator and then use WhatsApp, but it has its own difficulties. I will show an easy way to use WhatsApp on PC or even Mac.

I don't usually write about such things on my blog, but the method I am using is closely related to one thing I love the most, and that's web technologies.

The most popular method and the only one known to be legit is using the Bluestack Android Emulator, then download WhatsApp and use it, but getting Bluestack to work on your system is a challenge in itself, and if you have a system with old graphics card or low memory then you have no chance of getting it work!

UPDATE: WhatsApp launched WhatsApp Web a while back, and it now also launched Windows and Mac OS version of WhatsApp, download WhatsApp for Windows and Mac. You can continue with this tutorial for learning purpose :)

How? Let's get this started!

Let's first compare the size of things you need to download to get started with using Whatsapp on PC:

BlueStack Method : 103MB (Bluestack Download) + 40MB (Whatsapp Download) =  143MB
Firefox Method : 87MB (Firefox OS Simulator Download) + 38MB (Firefox Browser Download) + 3MB (ConnectA2 App) = 128MB, and no need to download Firefox if you already have Firefox > 32 (latest version)

We will move ahead step by step, as even this isn't easy, just require proper concentration on what you are doing.

1. Download Mozilla FireFox 32+

If you already have the latest version of FireFox then skip this step, else go to http://www.mozilla.org/firefox and download and install the latest version of Firefox on your computer.

2. Installing Firefox OS Simulator

Using your Firefox browser, go to the following URL https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ and install Firefox OS 2.0 or the latest stable release (note: downloading older version might not work properly.)

Running Firefox OS Simulator

We are halfway down there! If you have successfully passed the previous steps then bravo, the next steps are really easy.

In Firefox, open the App Manager from Tools -> Web Developer -> App Manager 

Now start the Emulator by click on the blue "Start Emulator" button at the bottom menu

You are now ready.. select the Firefox OS 2.0 or any version of emulator you have installed and a new window might open:

Installing ConnectA2

Whoa! See you are using a mobile OS, that's the fun of Firefox OS simulator. Unlock the lock screen and use it the way you would use any other smartphone OS.

You would need ConnectA2 app to use WhatsApp, so open the Firefox App Marketplace

After it's downloaded, open it and enter your country and phone number, you will be sent an SMS for verification. Enter the code and you are ready to use it!

To add new contacts in your chat list you first have to add that contact in the Contacts list on the Firefox OS. Use the Contacts app to add contacts and then you can simply add them in your WhatsApp.

If you didn't understanding some or not working, you can leave your comments and we will try to solve the problem. Enjoy using WhatsApp on your PC now.

Fun With The Developer Console: Styling Console Output

This post is for people who are familiar with the Webkit JavaScript console you find in Chrome and Safari browser. Did you know you can do a lot more with the console than just logging output ?

Console is a great tool for any developer to debug web sites and apps. But did you know you can even style your output with CSS ? Nope ?

Okay, so copy the following code and run it in the console (CTRL + Shift + J)

console.log("%cSee, you can style me!", "font-size:6em; color:#60B660; border:1px solid #eee; font-family:'Open Sans', Arial, sans-serif; text-transform:uppercase;");

See! It is that easy. With a few more parameters in console.log() you can get a style output of the text you pass in as the first parameter with prefix of %c . You pass regular CSS styles in the second parameter to style the output.

If you want to style multiple parts of the string you are outputting, you can do this:

console.log("%cLarge Text!  %cSmall Text", "font-size:52px;", "font-size:12px;")

So here we have two %c, to style them differently we need to pass two different strings with the CSS styles to apply on the corresponding part of the string. For more details check the docs on Chrome developer site

A Little More fun

Using this feature of the Webkit Developer tools, I wrote a JavaScript code which does magic on your console ;) Want to see what? Check out this pen (http://codepen.io/depy/pen/uxdpw) and open your developer console.

I Am Back!

It's been more than 6 month since I have posted [anything worth reading] on my blog. So I am making a comeback.

Going to give this blog and makeover and will be posting new and interesting stuffs soon, everything from codes to coffee  ;)

Stay tuned! New adventures are coming soon.. 

Is Your Facebook Down ? You're not alone!

Facebook, the second largest website on the internet has suddenly stopped working everywhere!

Update: It is up now
Millions of (almost everyone who uses FB on a daily basis) people encountered error while trying to access the Facebook website. None of the pages is accessible.

It shows the following page (Facebook's current status) :

Sorry, something went wrong
We're working on getting this fixed as soon as we can

This  is all Facebook has for the users now, no technical details about the errors are out yet. Plus there has been no updates on when it will be fixed and Facebook will be accessible again.

Don't worry, no one is able to access Facebook for now, so use an alternative to connect to your friends and family.

What you can do:

1. Go out.. meet your friends in real, chat with them and click some photos and share it using bluetooth.
2. Use Twitter or Google+ to show your condolences for the sudden demise (temporary) of Facebook (#kidding huh!)
3. Remember the old days? We used Text Messaging!

What you can't:

1. Update your status about Facebook's error.

Some Twitter updates on #facebook

Facebook Took Action to Block Developer Tools - Know Why

If you recently tried accessing the developer tools in your browser on Facebook you might have noticed a large notification in the console highlighted in red. Well, that's for a reason, if you haven seen that scam/spam yet let's tell you more about it.

Developer Tools are great for debugging websites and running scripts manually on a web page, it could be done on any website including Facebook. By writing a script, the author can make anything do with the site on Facebook they can use it for sending friend requests, making comments etc. anything that is possible. Because all that functions are controlled by JavaScript onsite.



Taking advantage of these awesome feature of a browser, some notorious spammers have wrote a script which auto-tags people and like pages associated with them on their statuses where they post instruction to use their code they wrote by claiming that the user will get a new theme for their Facebook, which would seem to work but what it does in the background will terrify you.

The code would send unwanted likes to the pages the spammers wants, it will auto-tag your friends in 100s of status automated by the script and much more as they might even get access to your account. The spam have got amazingly viral as people do really think it's going to work and try it without giving it a thought.

How does it actually look ?

This is an example of well planned viral spam by some script kiddies originating probably from Indonesia.

The link they tell you to open contains the code which they ask you to run in the browser's console which then do what it is supposed to - screw you.

If you see any such things in the future don't let it make you look like a fool! Just block that person and you are good and safe.

Facebook Took An Action to Control it

By disabling developer tools temporarily. Developer Tools is a great tool for developers so they didn't disabled it permanently on their site, but it let's you choose what you want to do. And will also show you what could be the consequences of running scripts from Unknown sources.

Not all scripts are dangerous, for example see my "How to Select All Friends at Once on FB" script, it just automatically selects your friends for inviting them in events etc. But you can clearly understand from this that code can do things that you don't expect to be automated.

Beware before you run scripts from third-party sources especially from these so-called lucrative offers. And even though the script seems fine to you make sure to see what others say about it, what's their opinion to get an idea about it.

It's all, be safe online :)