I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.
FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).
Example libraries (together with their source languages) that I would like to have available during debugging are:
Angular 2 (typescript)
RxJS (typescript)
I guess what I want to achieve is related to configuring source maps.
Any comment or guidance welcome.
edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?
Yes, to be able to set breakpoints in source files while debugging, you need sourcemaps. But this is not the thing that can be configured in the IDE, you need to set up your build tools accordingly. The only thing that should be configured on the IDE end is the run configuration - you might need to specify Remote URL mappings for your project directories
To complement lena's answer and as of #angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:
ng serve --source-map --vendor-source-map
It also works for the ng build command.
See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/
It is then possible to debug third-party libraries using an IDE or the browser.
Related
I'm working on a web application that currently uses vuejs for part of its interface. The back-end is NOT in Node, so there is currently no package.json file or any tool from the typical npm stack in this repository.
We already have a bunch of non-npm dependencies that need to be installed in order to use the repository, so my coworkers aren't too open about the idea of adding another layer of complexity. I can't blame them for that, it's the reason why I use npm scripts and not even gulp in my other projects. I'm tired of spending hours learning and configuring build tools that never end up doing what I want anyway.
But since the vue-cli tool no longer includes the build command, I'm a bit stuck. Is there really no more CLI app to build vue files at all? And if so, what would be the smart way to use vue without webpack? Template strings are not maintainable at all, and <script type="text/x-template"> don't work when you want to use multiple components from multiple files in the same page.
I realize your question says 'without webpack' but you may be interested in backpack - a CLI app i came across for building Vue.js without requiring you to write any configuration code. It is basically webpack preconfigured as a minimalistic build system for Node.js. It provides two commands, dev for live reload enabled development and build for building you project.
I am trying to learn and build my own version of mozilla with customizations. But I have no idea where to start and how to proceed. Can someone enlighten me in the following aspects:
1.Where to clone the latest open source code for mozilla
2.Where to learn the browser architecture and file structure(For linux/Ubuntu) So that I can customize the codes and add my own custom
addons.
3.How to debug and build the browser for Linux.
I heard its purely HTML,CSS and javascript. I have a low level expertise in all of this but no idea where to put together all of these. Please enlighten me with any resources. Basically I need a kickstart. Googling didn't gives me any such basic tutorials. I hope someone here would have tried these things before :) Any help is much appreciated.
There's a very handy guide on how to build Mozilla Firefox on MDN. Here's an outline of the steps:
Install the build prerequisite for Linux as described here - wget -q https://hg.mozilla.org/mozilla-central/raw-file/default/python/mozboot/bin/bootstrap.py -O bootstrap.py && python bootstrap.py
Clone the repository locally using mercurial - hg clone https://hg.mozilla.org/mozilla-central
Change the current working directory to mozilla-central and then issue the ./mach build command. This will produce a vanilla version of Firefox, unbranded (aka developer build).
Once building is complete, you can run your copy using ./mach build or package it using ./mach package.
In order to customize your build, you need to both change the code and the building options. The latter can be done by creating a .mozconfig file in the mozilla-central directory and adding the desired build options there.
Where to learn the browser architecture and file structure(For
linux/Ubuntu) So that I can customize the codes and add my own custom
addons.
To understand a bit more about the structure of the Firefox source code, you can have a look at this nice overview. Basically, each top directory represents a component of the browser (e.g. dom, browser, toolkit, ...). Depending on what you need, you have to change the code in the related directory. When you're lost and trying to find what to change, DXR can come to the rescue: it's the official Mozilla code search engine.
You mentioned addons: I'm not sure what's your objective, but if you just need to develop an addon, then you don't really need to build Firefox from scratch. There's a lot of documentation about how to create addons, if needed.
How to debug and build the browser for Linux.
The first part of this answers explains how to build. In order to debug, once you've built Firefox, simply run it with the command ./mach run --debugger. This will allow you to debug the C++ core of Firefox. However, for most of the front end code (which lives in browser/*), that's not needed: you can simply run Firefox and use the Browser Toolbox.
I recently started to use the new "devtool" module for debugging Node.js in Chrome Dev Tools.
The debugging process was a dream until I tried to use some ES6 code by using require("babel-core/register"); in the entry point of my application.
I could still use the devtool debugger but everything except my "node_modules" files where dumped into the "no domain" folder.
I assume the es6->es5 compiling needs some sort sourcemap to keep the folder structure possible.
Any ideas?
Way late to this but hope this helps someone, here goes.
From my understanding you're trying to use es6 features when running projects using the devtool command to server projects via Chrome Dev Tools?
To do this follow the babel docs on setting up a new project (make sure you have a .babelrc) then server your projects by running
devtool -r babel-register [MY_FILE_NAME.js]
Instead of simply devtool [MY_FILE_NAME.js]
You don't need to add any imports in your app's entry point if you followed the babel docs correctly.
see https://github.com/Jam3/devtool
I am using grunt to build my application, I want to use different configurations when the application is being run from built version and when I run it as a developer using simply nw.
Is there any such option which helps distinguish this behaviour?
You will need to set the desired configuration IN the processed source. There are many ways to accomplish this. Check out this blog post for some ideas http://addyosmani.com/blog/environment-specific-builds-with-grunt-gulp-or-broccoli/
All, I am trying to using third party NodeJS SDK in Titanium Studio. However, I consistently encounter dependency issues, such as util.js, utils.js, ms.js, events.js etc. I tried to add the missing module manually, but it looks like it will become un-tractable as there are so many dependencies.
My questions are :
1. Is that possible to use NodeJS based SDK in Titanium Studio .
2. If so, what is the right approach to include the dependencies.
Thanks a lot!
Titanium can't get Coffee scripts to work natively (assuming you want to deploy the TitaniumWrapper.coffee). A possible solution you may want to try is hooking a plugin http://billdawson.com/titanium_coffee_script/ in order to pre-compile Coffee scripts.
You can also try to embed everything using a Tiwebview that wraps HTML to load mojio-js.js but you would still need to observe events mojio client (like replacing keys, login an user and create a few model instances).
Hope you find the info useful and can serve for further research.