Skip to content

issue debugging app #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
bkstewart opened this issue Nov 15, 2012 · 8 comments · Fixed by #130
Closed

issue debugging app #11

bkstewart opened this issue Nov 15, 2012 · 8 comments · Fixed by #130
Labels
enhancement question

Comments

@bkstewart
Copy link

i have to admit that I am fairly new to debugging javascript in the client but using Chrome I was always able to view the source in the developer tools and set breakpoints. Unfortunately I cannot find the source in the sources list. How can I debug the appclass.js file for my app?
@brianbaker
Copy link
Member

With F2 (and any site that brings in dynamic javascript) debugging can be somewhat tricky. When using Chrome or even Firebug in Firefox, I like to insert a debugger; line into my javascript where I want the code to break. If you reload the page or reload the app, your breakpoint should be hit. Here's a SO article that talks about it as well: http://stackoverflow.com/questions/858779/making-firebug-break-inside-dynamically-loaded-javascript

@bkstewart
Copy link
Author

Ah, back to the basics. Is this something that you are thinking of looking into other approaches as this make debugging apps fairly complicated as you have to put in debugger statements throughout the javascript.

@markhealey
Copy link
Member

We won't be adding anything specific to F2 for individual app developers' debugging process. We are in the process of adding unit testing at a much higher level though. Debugging statements can and should only be used temporarily to determine what your appclass script is having trouble with -- definitely remove them when you're finished and your app is ready for prime time.

@brianbaker
Copy link
Member

Let me add a bit to what Mark said. Adding a debugger; statement is a common and simple way of debugging dynamic javascript. That said, there might still be ways can make app development easier.

Right now F2 is using jQuery internally to pull in the scripts for an app (using $.ajax({ dataType:'script', async: false, ... })). If I recall correctly, jQuery adds the script to the DOM but then immediately removes it from the DOM once it has loaded. This is why you’re not able to see the script and add breakpoints to it.

I think we would need to pull out that dependency on jQuery and add the scripts ourselves and leave the script in the DOM so that the browser debuggers could see them. We would need to be careful of browser memory issues (IE!) that jQuery already has solved.

Until we (or someone in the community) have time to work on that enhancement, a debugger; line is going to be the way to go.

@bkstewart
Copy link
Author

Thanks. I agree that leaving the script in the DOM would make it easier for app development and debugging, especially as the app become more complex. For now, adding the debugger statements works but is tedious.

@markhealey markhealey reopened this Jul 17, 2013
@markhealey
Copy link
Member

Reopening this to evaluate for a possible 1.2.2 release. Thanks @njbrm

markhealey pushed a commit that referenced this issue Jul 18, 2013
Replacing $.ajax with script tag for AppManifest.scripts, fixing #11
78cf728
@markhealey
Copy link
Member

I've replaced $.ajax with logic to append "regular" <script> tags for resources defined in the AppManifest.scripts. The code is different but the logic didn't change.

The generated script tags are added to the container <body> and their contents are interpreted by the browser as part of the parent page not part of F2.js. This means developers can set break points and scripts appear in the Scripts tab in the web console thus enabling better debugging. Also if errors occur in files included in the AppManifest.scripts, the web console now provides accurate error messages and corresponding line numbers.

markhealey pushed a commit that referenced this issue Jul 18, 2013
Added unit tests for cache busting, cleaned up script loader, fixed #11
fab6868
@markhealey markhealey mentioned this issue Jul 18, 2013
Closed
markhealey pushed a commit that referenced this issue Aug 21, 2013
Replacing $.ajax with script tag for AppManifest.scripts, fixing #11
9a28962
markhealey pushed a commit that referenced this issue Aug 21, 2013
Added unit tests for cache busting, cleaned up script loader, fixed #11
a9127f8
This was referenced Aug 21, 2013
Merged
Closed
@markhealey
Copy link
Member

Just for the record, there are quite a few comments crossing between this issue and #75 opened by @ilinkuo.

markhealey referenced this issue Sep 3, 2013
Adding initial changes.
e2dfa28
@markhealey markhealey mentioned this issue Sep 4, 2013
Merged
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement question
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

F2 version 1.3 OpenF2/F2
3 participants
@markhealey @brianbaker @bkstewart