Debugging mobile sites with Dashcode

The description applies only to computers with Mac OS X installed.

Now, when almost no site can do without using JavaScript, access to the JS console is a necessary tool at the debugging stage. In addition to debugging the JS itself, with certain skills, it is possible to remake it on the fly through a similar console and the whole page.
')
For “big” browsers, there is FireBug, Developer Tools embedded in the browser, etc., but often you need to start debugging the mobile site not in the browser with the User Agent switched, but in the iOS emulator ...

It turned out that if during the debugging of the widget in Dashcode, to switch to another site in the iPhone / iPad emulator, the debugging will continue for the new site.

So, the sequence of actions:

• run Dashcode
• create a new project using the Custom template, remove the tick for the usual Safari
• save the project
• from the main menu, in the Debug item, select Run Settings and then the desired emulator
• we start the emulator (Debug -> Run or button)
• in the emulator go to the site we need
• from the main menu, in the Debug item, select the Show Evaluator Window
  
  

This is the desired console.


If the site when working in the emulator displays errors, click Continue and continue to work. All errors will be described in the log in the main window (Run Log) and it will be possible to deal with them later.



By the way, messages from console.log are displayed in the same log if this command is used in the code.

I want jQuery

In the process of working with the site, I personally prefer to use jQuery, and as far as I'm used to it, I also want to have a similar syntax in the JS console, even on sites where jQuery is not used. A few lines - and we will have it.

Suppose we were too lazy to check for jQuery simply by looking at the source of the page. In the Evaluator window, type jQuery and press Enter. Make sure we are answered with ReferenceError: Can't find variable: jQuery . Just in case, you can check whether $ is busy. Enter $, Enter, and ... in the case of Habr, for example, we get:

function (B, C) {if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;}

Conclusion: in order to avoid conflict, when embedding jQuery you will need to use Safe Mode.
Now add jQuery to the site: copy the following code via the clipboard into the Evaluator window and press Enter

var head = document.getElementsByTagName('HEAD')[0];
var script = document.createElement('script');
script.src="http://code.jquery.com/jquery-1.5.2.min.js";
head.appendChild(script);
jQuery.noConflict(); // Safe Mode

We begin to torment the site ...