I'm a newby in HTML, while I've some skill with Processing language.
I'm writing an application in Processing which I want to visualise in a local webpage.
I've a basic index.html, which upload my sketch and the file processing.js.
It works.
My problem is that sometimes, an application which runs with no proiblem using the Processing IDE, does not run in the webpage. I assume there are still some bugs in the porting from Processing to JavaScript.
What I would like to know is: is there some way to debug the webpage I try to visualise?
Just to seek "where" the webpage remains stuck! In this way I could bypass the problem!
For now, I'm using Firefox for html visualisation.
Thanks a lot, Valerio
Ops solved! I downloaded FireBug, an add-on for Firefox implementing a debugger.
Then I launched the debugger. It showed me immediately the error.
For curious people:
I declared an ArrayList called "foo_list", containing object "foo":
ArrayList<foo>foo_list
The above line does not produce any error in the Processing IDE.
However processing.js complains with it, the debugger displayng
the following message:
ReferenceError: ArrayListfoo_list" is not defined
The solution is to insert a blank space:
ArrayList<foo> foo_list;
This works! Maybe the error given to the parser
from Processing to JavaScript!
Bye!
Related
I've just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack traces, compile errors, and - on larger projects - lots of test cases. However, much of this doesn't seem to directly translate to the world of web-dev; particularly debugging my code that's interacting with Angular2's libraries.
Could anyone suggest any approaches that I can take to debug code working with Angular2? Specifically; how can I see what parts of my HTML/TS is causing issues? I've checked the console, from which I can see that I've broken Angular2, but it doesn't seem much more informative from that.
Just to clarify; I don't want help for this specific instance. I'd like to learn how to diagnose+fix these problems myself.
Assuming you're using Chrome, you can put breakpoints in the "sources" tab in your console. Those breakpoints can be set on the ts files. If you need informations from the js file, you can uncheck Javascript sourcemaps in the console settings: this will allow you to put breakpoints in the js files.
On a breakpoint, you can do the usual (watch, spies, stack trace, etc...). You can also write js in the console accessing local variables directly, for instance:
function b(){
var c = 1;
// if you put a breakpoint here and type c in the console, it will write "1"
}
Specifically in angular 2, you might want to add breakpoints in the "throw e" lines in their library, you'll get more detailed stack traces. If you click on the "..." in their stack traces, you'll get access to your file that caused the error.
That's for actual bugs. Now, for performance, on the "timeline" tab, you can click on the "record" button on the top left. Once you're done recording (click "finish"), you'll see CPU usage. You can zoom on events in the timeline to see which part of the code is using up too much resource.
You can also track memory by checking the "memory" checkbox.
If you need to debug an iframe, there is a select box in console saying "top frame" which you can set to whichever iframe you want.
If I've forgotten anything important, just ask :).
Open web developer console, go to "Sources" section. Press "cntrl+p". A search box will open where type ".ts" and find your file or directly search your file like "myfile.ts". Open it and you can put breakpoints directly in the code, the same way we put breakpoints in a js file and Voila, you can debug Typescript.
I think this doesn't just hold for Angular2, but given you come from a Java background I assume this is more like "how do I successfully debug JavaScript web apps" in general.
Related to this I highly suggest you to take a look at the Chrome Devtools page (given you use Chrome which has very neat devtools build-in).
On that page there are a lot of useful tutorials. Specifically in your case probably the article on Debugging JavaScript which has some cool tipps like conditional debugging, breaking on DOM modifications, even break on caught/uncaught exceptions etc.
I also often suggest people to do the free Code School course on Discover Devtools which is nice as well.
In the case of TypeScript, also make sure that you enable sourcemaps. As you probably know TypeScript isn't directly executed by the browser, but rather it is being "compiled" (or as it's called "transpiled") into JavaScript. That said, you probably don't wanna debug the transpiled JS but rather the TypeScript code you wrote. To enable sourcemaps, set the proper flag in your tsconfig.json:
{
"version": "1.6.2",
"compilerOptions": {
...
"sourceMap": true
},
"exclude": [
...
]
}
If you are coming from the Java world, there's a good chance you are already using IntelliJ IDEA from JetBrains. If so, then it is possible to debug JavaScript (and TypeScript) applications directly in the IDE using the same interface you use for Java applications.
JetBrains has some documentation on the subject that might help.
As was said in other answers, you can also use the Chrome Inspector's debugger. Personally, I greatly prefer using IntelliJ to do that instead.
If you are just looking for examples on how the workflow goes, then take a look at this Github project that shows the use of Webpack with Angular2.
I am writing documentation for a package with WB 2.0.
Very often, when I create links or insert cells using the documentation tools palette, I get the following message:
GlobalStyleNames::shdw: Symbol StyleNames appears in multiple contexts {Global,System}; definitions in context Global may shadow or be shadowed by other definitions. >>
This message appears even after I start a new session of Workbench - Mathematica.
Except for this, everything else seems to work fine. The documentation pages seem ok, although I have not yet made a "Build". Links, for ex, work as expected.
Can you explain why I get this message and how to fix it?
Should I expect problems at the Build stage?
The only "hint" I can give (maybe irrelevant) is that the first time I created the symbol pages (automatically from the usage messages), WB got "confused" somehow and included the pages for the Numerical sample package which I downloaded from the Wolfram Workbench web site. I erased these symbol pages and eliminated any link/connection/extension relating to this Numerical package and since then everything seems ok, except for the above message.
I just experimented a little further with this problem and this is exactly what happens:
Start WB 2.0
In package explorer, doubleclick on a .nb file so that MMA is automatically started as default editor (I use the CardDeck.nb file in the CardDeck sample package found on Workbench site)
When in MMA, open the DocumentationTools palette
Click on the sample tutorial page button (or most other buttons for that matter)
Bang! I get the message:
GlobalStyleNames::shdw: Symbol StyleNames appears in multiple contexts {Global,System}; definitions in context Global may shadow or be shadowed by other definitions. >>
in the message window.
So it seems that this problem is not related specifically to my package files, but is somehow linked to the DocumentationTools palette.
Does anybody else have this problem?
Is it a corrupted installation?
Thank you for any help
You could try switching off the automatic source loading for specific notebooks via Properties, Notebook Properties.
I have downloaded WkHtmlToXSharp (which uses WkHtmlToPdf under the hood) and opened the solution.
When I run the test given with the project - CanConvertFromFile, it gives me a nicely formatted PDF output.
But as soon as I delete even a blank space from the source HTML file ( WkHtmlToXSharp.Tests\Resources\page.xhtml) it renders only text with no HTML structure in place i.e. all text on the page is rendered as a single line.
I am finding the same problem with my dev project using WkHtmlToXSharp.
I suspect this is due to change of character encoding of the source file. Do you know what the character encoding should be? Is this an issue with WkHtmlToPdf as well?
Note: Sorry for the slightly misleading tag (WkHtmlToPdf), the site did not allow me to create tag WkHtmlToXSharp.
Many Thanks!
wkhtmltopdf assumes UTF8 as default, but there's a property (WebSettings.DefaultEncoding) which can be used to override the encoding expected.
However, your problem looks more like you are re-using a disposed instance or something similar. May you describe a bit deeper your use case.. is it an ASP.NET application? a console project? are you running under visual studio's dev web server?
I believe the cause of this is in the issue tracker on Pablo's repo. Issue #7: Only works first time
datimson commented 25 days ago
Also, for the sake of helping anyone else who might have this problem, when debugging with WkHtmlToXSharp in ASP.NET you need to stop the ASP Development server before restarting or rebuilding the application - this is what was causing my text only PDF outputs.
I was told that AJAX would be the best toolbox to use for building the type of application I am interested in creating.
That being the case, I fired up an old copy of Dreamweaver MX2004 I have and started creating the *.htm, *.js and *.php files. However, when I loaded these files onto my server, I was unable to get the program to do anything. I tried to view the program in IE8, if this explains anything.
Where am I screwing up? Do I need to set a certain flag on my bowser?
I look forward to you response.
Does your server have PHP support? What does "unable to get the program to do anything" actually mean? Are you getting error messages? Unexpected results?
i'm trying to debug an ExtJS application using IE8 but the file ext-all-debug.js it's too big for the internal IE8 debugger and takes ages to load the code, is there any faster Javascript debugger for IE8 ? Another solution that i came up with is to include every extjs file instead of the big ext-all-debug.js but i cant't find the full list (and order) of the files merged into ext-all-debug.js
Thanks for your help
i cant't find the full list (and order) of the files merged into ext-all-debug.js
Here you go: http://code.google.com/p/extjs-public/source/browse/extjs-3.x/include/ext.jsb2
Search for ext-all.js.
This file is actually part of the JSBuilder tool which helps you create a custom version of ext-all.js with just the files you need.
Edit: I generated a copy-and-paste list of the 3.2.1 includes
FireBug for FireFox. You don't have to really test your application in IE8 so I suggest FireBug. If you really want to, you can use FireBug Lite. JS Lint to detect syntax problems.