JavaScript debug console

tiptop 13 years ago updated by Nicholas Eveland 5 years ago 40 3 duplicates
It would be really helpful to have a JavaScript debug console when editing HTML files... at the moment, it is impossible to find a problem when using the preview functionality of Textastic.



Textastic 6.3 adds a new JavaScript console that can show errors in your JavaScript code and allows you to log custom messages using the JavaScript Console object (for example by calling the console.log() method).

Duplicates 3
It would be awesome to have a JavaScript debug console.

This app is great. Thank you.
This is definitely something I need, I love the app so far, but I'm really missing a way to debug my code. Safari has a built in developer mode, maybe this could be integrated into the app?
If you can pull this off, it would be an unbelievably useful feature.
I still haven't found a way to enable this in UIWebView. I doubt that this can be enabled in third party apps. But if anyone knows - tell me!
@a blach: i think there are some javascript debugging libraries written in javascript. maybe you could create a switch that switches javascript debugging on and off in the preview mode. and if it's turned on, you could just insert a script into the previewed html. maybe something like that.

i'm really sorry about my english! :D
Yeah, I have thought about that. Maybe I'll do something like that in the future.
there is another solution: remote debugging

@a blach: this might be interesting for you: http://atnan.com/blog/2011/11/17/enabling-remote-debugging-via-private-apis-in-mobile-safari/
i dont understand anything about ios developing but this sounds interesting.

@all the others: we can use the full-featured developer tools from firefox, chrome and safari now: http://phonegap.github.com/weinre/Home.html
From the article: "Enabling the remote inspector on a UIWebView in an app running on the device doesn’t seem to work."

it's possible to use Firebug lite in Textastic: http://getfirebug.com/firebuglite

The problem is, that its user interface doesn't work particularly well on a touch screen. But it's definitely usable.
yeah, i know that i can reference it in my html. but maybe you could add an option "autoatically start firebug lite" to the preferences. i think almost everybody who uses textastics offline view also works with a developer console.
I would have to implement my own debugging console or change Firebug lite to properly work with the iPad's touch interface before I could add it to Textastic. That's why I didn't add it to Textastic yet.
I love Textastic and I agree that a Javascript debugger (or even a simple error console) would take the app into a whole other realm of amazingness!
You can already use Firebug Lite with Textastic: http://getfirebug.com/firebuglite

Just reference it in your html file as described on their website.
Oh that's great! Just got it working. Thanks for the heads-up! :)
doesnt work for me :(
the debug bar doesnt come up.
Hi Janis,

You'll need reference the firebug lite script and add:
<html debug="true">
to your html document.
oh shit. xD
Textastic 4.0 adds Firebug Lite integration.

Seems nobody understand the problem... you only can activate Firebug Lite after the website has loaded. Because of that FL is simply unusable because it does not catch the most important stage of the HTML application. :( 

Instead of using the feature in Textastic, you can reference Firebug Lite directly in your html file as described at http://getfirebug.com/firebuglite#Stable:

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

This way it will be loaded with the web page.

As Dave pointed out above, you also need to add <html debug="true"> to your html document when you do that.

Thanks finally I can use it! :D

Any chance that textastic can inject the firebug lite option after the html node? I mean this works now but an automatically solution would be cool. Are there license problems or why do we need to download it every time we preview a page ? 

Greets BlackCat

Well, you can download Firebug locally and reference the local copy. I didn't include it in Textastic so that it automatically uses the latest version.

I don't think it's feasible to automatically inject this - I think that would be error-prone when the html file has a format that's not anticipated.

Ah ok that's why. Yeah I already downloaded it and tweaked it with some hooks to get the errors and stack traces into the firebug console. Nice tip alex, should be marked in the manual as well. Luckily with this I can develop on CWtactics with my iPad now again. ^^
I tried downloading the firebug-lite.js file and referencing it locally, but I couldn't get it to open the debug window. When I reference it from the Firebug server directly, it works fine.

I have the debug="true" entry on my HTML tag. I also have added the "#startOpened" parameter to the script tag. But I still can't get it to open the debug window when referencing the file locally.

FYI, I'm using Textastic to work with Github files, accessed via Working Copy. Is that part of the problem? Firebug Lite (when it does work) also gives me the dreaded "Access to restricted URI denied error", when I try to inspect any of these local files with it. Maybe because they're not really local when accessed through Working Copy?
You cannot reference it locally when you use the "Open…" command, since the file is located in the Working Copy sandbox while the firebug-lite.js is located in Textastic's sandbox. You can try to use the "stable live link" version instead which references https://getfirebug.com/firebug-lite.js

Also, Textastic has only access to this single file in Working Copy and not other files in the same folder in Working Copy.
Ah, ok, I just saw that you did successfully reference the Firebug server directly. So yes, that's the workaround in this case.

Please share, how did you get firebug lite to work locally?

Under review
In the preview window, you can enable Firebug, but that is really only useful for inspecting elements because it is loaded after the page is loaded and JavaScript is already executed.

Did you try to reference it directly from your HTML as the first script as described on the Firebug Lite site? http://getfirebug.com/firebuglite#Stable

There are certain limits even then. Since Firebug Lite itself is written in JavaScript, it might not be able to catch errors if the site has syntax errors in JavaScript code.
Another advantage over Firebug Lite would be the possibility to detect JavaScript syntax errors and exceptions and undefined values, as the console wouldn't have to run in JS itself. This would be a huge improvement. Here is an example on how this feature could be accomplished with the iOS 7+ framework JavaScriptCore: http://www.bignerdranch.com/blog/javascriptcore-example/

Textastic 6.3 adds a new JavaScript console that can show errors in your JavaScript code and allows you to log custom messages using the JavaScript Console object (for example by calling the console.log() method).

sorry for a very basic question : how to see this console under Textastic ?

You can invoke it by tapping on the console button in the toolbar on the preview screen. Here is a screenshot:

I’m trying to test a simple console.log statement, but nothing is showing up in the console. What am I doing wrong?

The JavaScript code must be either inside a script tag in a .html file or if you want to have it in a separate .js file, you need to reference that file from a .html file. Then you need to show the preview of that .html file to make the console.log statement work.

So for example this would work:

<meta charset="utf-8">
<title>Console Test</title>
console.log('this is a test');

thanks I’ll try it! Thank you for the fast reply!


I am using Textastic for iPad and cannot get anything to log to the console. I tried the above solution by copying and pasting into an html document and it worked. However, if I type the exact same thing and preview it, I get 'SyntaxError: Invalid character '\u201c'. What am I doing wrong here???