PDA

View Full Version : Sencha Fiddle + Developer Tools?



dbarbakadze
27 Oct 2014, 1:27 AM
How do you debug typical Sencha Fiddle in Developer Tools? Or is there any alternative way to set breakpoints, inspect the objects, etc?

I was not able to find the code from my fiddle vie Developer Tools.

mitchellsimoens
29 Oct 2014, 4:05 AM
Sencha Fiddle runs your code by creating the HTML to run in the iframe. The HTML has all the JavaScript within <script> tags, they are not individual files.

If you need to set a breakpoint in your code, you can use the debugger; statement and if you have dev tools open it will act as a breakpoint and allow you to walk through your code just fine.

carol.ext
29 Oct 2014, 12:26 PM
Wow, I just got this to work in Chrome; thanks for the tip. Have been wishing for this in firebug, does it work in any versions of Firefox/Firebug? Or Internet Explorer?

Just got Chrome at work so I'm still learning how to do what I normally do in firebug.

mitchellsimoens
29 Oct 2014, 12:57 PM
firefox/firebug should be able to use debugger and breakpoints like chrome can.

carol.ext
31 Oct 2014, 9:43 AM
Not working for me in Firefox 26, seems to be the latest version I can get at work. I upgraded Firebug to 1.12.8 (looks like latest that supports 26). The result is still that adding debugger statements to the fiddle code results in "stopping" and opening script tab, but the fiddle js code is not shown in the script tab.

Shown in script tab after hitting debugger statement:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sencha Fiddle - Ext JS and Sencha Touch Fiddler</title>
<link rel="stylesheet" href="resources/Fiddle-all.css"/>
<script type="text/javascript" src="app.js"></script>

<style>
#splashScreen {
position : absolute;
top : 0;
bottom : 0;
right : 0;
left : 0;
background : #2d2d2d;
background-image : url('resources/images/stats_bg_tiled.jpg');
z-index : 30000;
text-align : center;
font-family : helvetica, arial, verdana, sans-serif;
}

#splashScreen .title {
font-size : 3em;
line-height : 30px;
color : #fff;
-webkit-font-smoothing : antialiased;
}

#splashScreenLoading {
margin-top : 5px;
color : #fff;
-webkit-font-smoothing : antialiased;
}

#splashScreenProgress {
background : #999;
border : 1px solid #000;
height : 10px;
width : 400px;
margin : 0 auto;
margin-top : 5px;
}

#splashScreenProgressInner {
height : 10px;
background : #0f0;
width : 200px;
}
</style>

</head>
<body>

<div id="splashScreen">
<img src="resources/images/sencha-logo.png" />

<div class="title">Sencha Fiddle</div>
<div id="splashScreenLoading">Loading Application Files...</div>
<div id="splashScreenProgress">
<div id="splashScreenProgressInner"></div>
</div>
</div>

<textarea id="useCode" style="display:none;">{useCode}</textarea>

</body>
</html>

pscanlon1
31 Jul 2015, 6:30 AM
Same issue, its intermittent. No Idea why it happens.

mitchellsimoens
19 Aug 2015, 9:20 AM
I've noticed, least for me, in fiddle and other sites that load javascript not via loading files that having the dev tools open before said code was loaded and run allows it to show the code. When I open after the code was run and there is a debugger somewhere (like a button handler) then what the dev tools show is the index.html instead.

bambam
27 Oct 2015, 10:59 AM
Ok, I've tried to open fiddle page, run some times my script with debugger statement inside listener then open dev tools and run again
and viceversa - load fiddle with turned on devtools then write and run script.
Neither way showed me a JS code of handler with debugger statement.It was working a month ago or so.
I use this type of debug in fiddle regularly
But now I have no any idea how to run script with debugger statement.

I repeat - earlier JS code of app showed as VM tab. It means it was loaded dynamically without separate file source but in virtual machine of JS (as i could understand).

mitchellsimoens
10 Nov 2015, 6:35 AM
I just reworked how fiddles are run. Prior, it was generating the HTML client side and throwing it into the iframe. The iframe was even recreated each run to get a fresh document for Ext JS. This performed very well but browser dev tools didn't like that.

Now, it does a form submit into the iframe which then loads the generated HTML server side. This is a bit slower due to the server call now but the browser dev tools like it much better. It's not very noticeably slower but is a little slower, depending on where you are in relation to the server location.

Also, since I don't need all the information in the client, the initial ajax call went from ~140KB down to ~45KB so the startup should be a bit quicker now.

bambam
10 Nov 2015, 6:41 AM
Thanks! Now DEBUGGER statement works well!