Can someone please explain what the point is of source maps? Because as I see it, my concatenated and minified file gets loaded (talking about JavaScript), alongside 100+ modules. How is this not affecting performance when I'm loading twice the size as before?
The point of a source map is that you can run minified Javascript or transpiled Javascript (which is not particularly readable in a debugger by itself), but when you open the debugger, the source map is loaded by the debugger and it gives you a readable form of your source for debugging purposes. The source map is not loaded if the browser is not configured for source map debugging.
Source maps are also extremely useful if you are transpiling code from something like TypeScript or ES6 down to ES5 Javascript so you can see the actual code that you wrote originally in the debugger rather than only the transpiled and minified output.
The alternative before the days of source maps was to have separate versions of your site or options on your site that would load non-minified JS so that you could debug with normal symbols, but this of course isn't actually debugging the exact same code so even then, this could still leave you having to try to debug minified code.
You can read here about how source maps are enabled in the Chrome debugger. If you're watching what is downloaded by the browser, then make sure that you are using a browser that does not have source maps enabled when checking if they are downloaded.
Because you only load the sourcemap when you open the debugger.
Actual users, who don't open the debugger, still get the benefit of the minification.
A source map is a developer tool. It's practical to know the original source when an error occurs within minified source, so you can track down the source of the error.
Source maps are thus only loaded by debuggers, and will not be loaded by default. However, you should consider disabling source maps for production environments, because debug data usually shouldn't be on production environments: for performance and (more importantly) security reasons
Related
I am building a kiosk application using webkitgtk on the raspberry pi 4.
This application will not be connected to the internet and all the html,css, javascript for the UI are all located on the local filesystem.
I am using buildroot to setup the Linux system, starting with the pi 4 defconfig provided in buildroot.
I have enabled all the packages needed to get webkitgtk running.
Also, the kiosk application has been tested on my desktop, using the same software stack and it works
However, when i try to launch the application on the raspberry pi, a blank page pops up. I have played around with the WebKitWebSettings object associated with my WebKitWebView by enabling local file access. It still shows up a blank screen.
Also included in my pi4 application bundle is a simple gtk3+ application. This launches successfully!
I will really appreciate some pointers as to why this is happening as i have sort of reached a dead end
UPDATE
I enabled the MiniBrowser app that comes with the Webkitgtk package.
Entering the local url, The page does not load. It only gives me a message at the top saying "Successfully downloaded".
It seems to be treating my input as a download
UPDATE 2
After some more experimenting, i was finally able to get webkitgtk working on the pi 4.
The problem seems to originate from using the webkit_web_view_load_uri() api.
It does not seem to recognize my html document as a web page.
I got around it using the webkit_web_view_load_html() call. This included some hacks by first reading in the contents of the html doc into a character buffer, and passing it to webkit_web_view_load_html().
You also have to provide a base path to this function call to be able to resolve all the urls (scripts, css, images etc) in your html document.
Another problem i haven't been able to work around is, SVG images are not loading in webkitgtk. I have used jpg formats and they work. I suspect this my be due to a configuration switch in building webkigtk
It's hard for me to figure out what might be happening without having access to your environment and settings. My gut feeling is that pages are showing blank because perhaps some shared libraries are missing. You can check that with:
$ ldd WebKitBuild/GTK/Release/bin/MiniBrowser
I am using buildroot to setup the Linux system, starting with the pi 4 defconfig provided in buildroot.
There's a buildroot repository for building WPE for RPi. WPE (WebPlatform for Embeded) is like WebKitGTK but doesn't depend on GTK toolkit. Another important difference is that WPE runs natively on Wayland.
If you're interested in having a webapp embedded in a browser running in a device with limited capabilities, WPE is a better choice than WebKitGTK. The buildroot repo for building WPE for RPi is here:
https://github.com/WebPlatformForEmbedded/buildroot
There's is also this very interesting step-by-step guide on how to build WPE for RPi3:
https://samdecrock.medium.com/building-wpe-webkit-for-raspberry-pi-3-cdbd7b5cb362
I'm not sure whether the buildroot recipe would work for RPi4. It seems to work for all previous versions, so you might be stepping in new land if you try to build WPE on RPi4.
If you have an RPi3 available I'd try to build WPE for RPi3 first, and make sure that works. Then try for RPi4.
I noticed that when I don't use brackets in some parts of my code (condiditional if else) I can't properly debug it in google chrome. This also happens in edge
Does anybody know what is it due to?
The code that you see is the source code written in JSX. Browsers can't run JSX, they can run Javascript. Your tool chain transpiles the JSX to Javascript and provides a source map that tries to allow you to put breakpoints in the original code while stopping at the execution point in the generated code. Sometimes the mapping is not exact and precise enough to allow you to pause on the exact same spot. That seems to be the case in this instance.
The app starts with a blank screen for a while before the app really loads
I'm using electron-forge's react-typescript template.
I can make a dmg or deb file successfully, but I noticed when I run the packaged app, there will be a blank screen for a while before the app actually load especially the first time
I checked the distributable file and found the whole source code inside it, so I guess it's because it has to compile typescript every time?
Then how to "precompile" my source code and use that to make a distributable app?
update:
Since the project was developed by other colleague, I just found out this project is using electron-compile to compile it on the fly, maybe the solution has something to do with this?
I checked the distributable file and found the whole source code inside it, so I guess it's because it has to compile typescript every time?
This is not true. Current stable uses electron-prebuilt-compile (https://github.com/electron-userland/electron-forge/blob/1709af0bc53bd962466dd2025672b95f2e9399cc/packages/api/core/src/util/electron-version.ts#L6) which creates precompiled cache for typescript files for packaging time. Typescript source is only needed for module resolution in actual filesystem.
there will be a blank screen for a while before the app actually load especially the first time
This requires profiling application itself to find out what is happening in meanwhile. It is possible module resolution takes long or either any js execution time's blocking, but can't tell without profiling it.
I need to debug my CN1 app on Android. That's why I successfully followed the instructions given in this Codename One tutorial (I copied and updated the gradle files dependencies content as explained).
I am a little bit confused now with the updated sources part.
There is a portion we didn’t get into with the video, copying updated sources directly without sending a build. This is possible if you turn on the new Android Java 8 support. At this point you should be able to remove the libs jar file which contains your compiled data and place your source code directly into the native project for debugging on the device.
If I change things in the native implementation file and if I launch the debug process it seems to work. But do I have to remove the userClasses.jar file from libs directory ? When is this jar file being called actually ?
Furthermore can I also make changes to the CN1 code from Android Studio (eg changes in Main Class) or these need a proper build process on the servers ?
UPDATE November 22nd 2016
In my experience the first time you want to debug your app in Android you need to copy paste your source files AND the userClasses.jar (in libs folder). When you update ONLY the native implementation files you can run a debug without sending a build. But if you change something in the CN1 code it won't be reflected in Android as long as you don't update the userClasses.jar (seems logical since Android does not know anything about CN1).
Any piece of information appreciated,
Cheers,
The build server doesn't have access to your code, just the jar with bytecode/data files and the user jar is "almost" that jar.
We run some bytecode processing such as retrolambda and other things so it isn't exactly what you compiled when you built the project.
If you copy and paste your source directory into the project you will need to remove that jar so you won't see duplicate classes. You will also need to enable Android Studios Java 8 language support to get that to work.
Is it possible to redirect the output of GWT.log() from the development console to a file? I need to debug a compiled GWT app and any logging or exception traces would be really nice.
GWT.log is compiled out, there is no way to get access to it when compiled to production.
On the other hand, GWT now has support for java.util.Logging, which can, when compiled in, send errors to the server for use however you want. It also can print these logging statements to a in-browser console, such as a popup or Firebug/Chrome Inspector. See http://code.google.com/webtoolkit/doc/latest/DevGuideLogging.html#Remote_Logging (and other sections on that page) for more details.
Keep in mind that unless you compile in full stack trace info, the exceptions will be very hard to read. See http://code.google.com/p/google-web-toolkit/wiki/WebModeExceptions#Emulated_Stack_Data for more info.
There is no way for a browser (without dev mode running) to write to a local file, for logging or other reasons. This is done for security reasons. Html5 might have support for some of these things, but they won't be supported in older browsers.