Debugger for HTML/CSS/JS in Android/IOS device browser - debugging

I have developed Lots of websites, where i use Developer tools on IE / firebug on Firefox & Chrome is also having inspect element function for Editing & Debugging. But When i started developing for Android/IOS browser i am not getting how to edit & debug.
Is there any way to do this coz, its eating lots of my effort.

weinre is exactely what you are looking for!
import the library into your index.html and make it point to your local weinre server or here and you'll have your device console into chrome.
pretty straight forward

You probably should use a remote debugger such as Pony or using Firefox.
You can also do this with Safari on IOS.

Related

error parallax effect in firefox but works on google chrome

I need your help my website is not functioning properly on firefox browser but in edge, chrome and opera and safari it works only firefox is not functioning properly
Firefox Browser
Google Chrome Browser
I would recommend setting up all your projects in Xampp or something similar first before testing it. If you are going to upload to a server you need to replicate the environment locally before you decide whether it is going to work or not. It seems complicated but it is quite simple, you can find out more here. https://www.apachefriends.org/
That said, check your urls, they are not the same for your two different screens, the one is referencing an anchor tag.

Debugging tools/methods for phonegap blackberry app

Are there any tools/methods for debugging phonegap Blackberry(5,6,7) app . Presently am using Alert for debugging which is very tedious .
Since you are using PhoneGap, its always better to view/debug you app on a webkit browser like Chrome/Safari. Also try Ripple emulator from BlackBerry which is the best web emulator for mobile devices: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en
Since you are developing a web app, and as far as I know there's no "official" IDE for BlackBerry Webworks, this question is not BB or Phonegap specific. You are just asking how to debug JavaScript. There are a lot of questions in SO about this, just run a search. I'll give you my two cents:
As the JavaScript code runs in a browser, you need to debug in the browser. Most browsers have built-in debugger or extensions. For Firefox I'd reccomend Firebug extension, in Chrome the built-in debugger is pretty good. I can't tell about IE but I think there's something similar.
If you need to debug on device, then use console instead of alert.
Finally, have a look at WebStorm. Probably the best IDE for JavaScript right now, but you need to purchase a license. It allows you to attach to the browser debugger and debug in the IDE.

Network panel not working in weinre

I wanted to write an AJAX based hybrid Android application.
I tried to get my head around weinre but I can't get the network panel to appear. It does not show regular network interactions and for any XHR interaction it states "status pending" and "type pending".
Has anybody else faced this problem?.
This link did/did not solve the problem: https://issues.apache.org/jira/browse/CB-5424
Weinre is pretty limited, and nowadays better solutions exist to inspect your Hybrid app:
On Android 4.4 and above (or lower Android if you're using CrossWalk), you can use Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging Just point to chrome://inspect/#devices and you should see your device and hybrid apps and browsers. You may need to first run adb start-server for Chrome to see your device
On iOS, you can use Safari (on a Mac): you need to enable Web Inspector on Safari on iOS, and use the Developper mode of Safari on the Mac. See eg http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

Remote console.log() on iOS devices

I am developing a web app that involves touchEvent. It will be much more easier to debug those if I can view the console remotely on my Mac.
Can I make my Mobile Safari on the iOS device store the console log somewhere in the system. I have already jailbreak my iPad.
Thanks!
plug iphone into computer
settings > safari > advanced > web inspector (turn on)
open safari on your computer
run your web app on your iphone in the safari browser
on your computer in safari, go to Develop -> "name of your iphone" and then find the correct tab under "Safari" opens Web Inspector.
doing these steps enables the safari debug tools on your desktop to reflect and respond to the connected iphone.
hope that helps.
Just turn on the debugging console in Mobile Safari. This is enabled in Settings/Safari/Developer.
One File Remote Console.log for node.js
Solution: Server side console log.
In iOS6, you can now use the Remote Web Inspector on OSX to connector to the iPhone via USB. See the Apple documentation for more information.
You can use a remote javascript console. There a few available.
weinre
spotneedle
jsconsole
Not sure if I'm allowed to re-post my answer from another question, but at this link here I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
mobile-console-log is also a utility for debugging directly from your mobile into Chrome Devtools

Debugging web app on the palm pre?

I have a web app that works fine on desktop browsers, but struggles on the palm pre browser (via the emulator). How do I debug the app on the palm pre browser? There doesn't seem to be any error console, dom inspector, etc... I'd expect such tools from a web-app oriented phone.
The debugging tools on the webOS platform are generally still poor, and thats speaking for the application development.
I dont think there is any debugger for the web browser. You're stuck with document.write and related.
And for applications themselves, its better, but not by much. There is a command line debugger that you can use to set break points and inspect. There is also an inspector based on Safari that you can use to inspect the dom and such. And there is basic info/warn/error debugging to syslog. But these are for applications using the Mojo framework, and not exposed to web pages.
That said, the browser is based on Webkit, so its fairly close to Safari 4. There are some good sized chunks missing in Canvas and advanced CSS support. Browsing the developer forums will help see what CSS and Canvas features are missing or broken.

Resources