I download Firefox latest source code and I want to know the detail of how Firefox layout engine work.
Especially, how block/inline formatting context implemented, how block level and inline level elements layouted.
Can someone give me some advices or links on reading the source code?
update:
I compiled Firefox on Win7 and managed to run it in debug mode and set some breakpoint. But I'm stucked. Where should I put a breakpoint so that I can step through the code which calculate the x,y,w,h of html elements.
Did you try reading this documents:
http://www-archive.mozilla.org/newlayout/doc/,
https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla and
https://wiki.mozilla.org/Gecko:Home_Page
Related
Currently finding issue lazy loading CKEditor 4, appreciate any advice. What I tried:
Including ckeditor_basic.js but this already needs a CKEDITOR
instance
Loading ckeditor.js on click but this complains
'Synchronous XMLHttpRequest on the main thread is deprecated because
of its detrimental effects to the end user's experience.' as well as
some others errors, fails badly.
Any advice appreciated!
If you would like to insert CKEditor script dynamically you can use technique from this code pen - https://codepen.io/j_swiderski/pen/qPGRGb. It is important to wait for ckeditor.js to load before creating editor instance thus using setInterval to check if CKEDITOR object is available seems like a good idea.
In your comments you have written, you don't want editor to load every time you load the page. One of the reasons for that might be the size of ckeditor.js file.
If you think editor.js is too big it is important to answer yourself how much plugins you really need and then create editor accordingly to your needs using the online builder. Please have a look at below samples using dev-tools and notice the difference in ckeditor.js size: Full package has 600KB while Basic Package has only 400KB. If you just need the basic formatting then your ckeditor.js could get even smaller and should not be a problem when loading the page.
If you have created some custom plugins then recommended practice is to get CKEditor source code from Githhub, fork it, make changes/add custom plugins, build your editor. That way you will get minified and obfuscated editor instance which includes your custom plugins and again should not be a problem when loading the page.
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.
With VS 2012, Web Essentials, TypeScript 0.8.3
There is a TypeScript file "test.ts". It is compiled into "test.js", having a sourceMappingURL at its end.
//# sourceMappingURL=test.js.map
The Javascript file is loaded dynamically with $.getScript. However, when in Chrome Developer Tools I cannot find the source anywhere, so a breakpoint cannot be set.
If I manually edit the generated Javascript by appending a sourceURL, the situation improves.
//# sourceMappingURL=test.js.map
//# sourceURL=test.ts
The name "test.ts" is offered in Chrome in the Sources tree. However, clicking on it opens the Javascript file "test.js". There breakpoints can be set and used.
Actually it does not matter, whether the correct name "test.ts" or any other name is coded.
What should be done, so debugging a TypeScript file, whose generated Javascript file was dynamically loaded, is possible with Chrome?
I also tried Canary. It made no difference.
I am writing to affirm what WhyMe wrote. Appending tag to using jQuery.append() does not add filename to sources tree, but using DOM element to .appendChild DOES add filename to sources tree.
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", 'Scripts/app/Views/Management/Spock.js');
document.getElementsByTagName("head")[0].appendChild(fileref)
Spock.js will be in the correct folder in Sources tree.
Using //# source=Path_to_file works, but
A. must have the pathing correct, and
B. filename appears under <No Domain>; which is really ugly.
PS - I do not have 50 reputation points, so I cannot reply as a comment next to WhyMe's comment, but I can add an Answer?
Working in Chrome Canary (25.0.1364.172 m), and using require.js to load scripts dynamically, I can set and use breakpoints on the typescript files:
NB that this only works on code which matches some JS output - so (logically enough) you cannot set a breakpoint anywhere inside an interface definition.
I'm not sure if using require.js for your on-demand script loading is an option. If so, it should fix your problem.
$.getScript would probably load the file using xmlhttp and adding the javascript later to the DOM thus the browser cannot map the javascript to the js breakpoint
Requirejs adds a script tag with a src attribute so the browser can still hit the breakpoints
Ok. I have some experience with HTML and CSS, little with Javascript and none with JQuery.
And I'm trying to try out in my HTML file the Galleria plugin with fullscreen theme but I can't make it work. ( http://galleria.aino.se/ )
It only show the empty page with no pictures. I took the source code from the demo page and I pasted in my page and after some little modifications with the url of the theme, I managed to have on my screen only the image, without the "mechanism". Any help?
I think the instructions were made for an old release of the plugin and that's the reason I can't get it work.
P.S. I found a ready made demo on googlecode, but I can't get the fullscreen feature. Any help?
Try passing debug:true to yield more errors if you are seeing a blank page. Regarding customizations, try the documentation and API reference.
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.