There are certain benefits that you can gleen from having one combined javascript file over many smaller files. It does come with a few drawbacks, though.
Pros:
- Better maintenance in your markup - Maintaining .js file references is easier. Just put one/few references across your main wrapper designs, and you don't have to worry about adding anything new later.
- Caching advantages - If you have your HTTP headers set up properly when serving up your JS files, you will have browsers caching your javascript automatically. This means that all of your client side logic will download once initially, and be carried over to other pages 'for free'.
- Cutting out round trips - Every javascript file you load on it's own is another round trip to the server, so you are cutting down potential round trips if you need multiple files for a particular page.
Cons:
- First/All page loads are longer - All of your logic had to come in at once, so it will be a larger file than a fraction of whatever you could have had previously. If you have a caching strategy, you only take this hit once on the first page load.
- Issues with cached JS - If you are caching, which you likely are, if that file changes in an important way that needs to be reflected immediately to the updated application, you may run into issues. Make sure to use cache buster query stringscache buster query strings in this case. Consider reading the 'Time created' date from the file system to have this process be automatic.
- Be careful with certain JS concepts - You probably don't want to put any logic in your library that would actually run on loading. Think JQuery's 'Document Ready' functionality. That will effectively run on every page, and you likely don't want that in most scenarios. I personally use an MVC like pattern where I have a controller 'module' per page that I have an Init() function for pages that need special handling on page load. Just call it from your page in a small script tag, and you're done.
I haven't noticed a particular difficulty in debugging that you seem to be concerned with. My advice would be to create a minified and unminified version of your combined .js file. Then you may want to have your application cleverly tell weather you are in a development environment or not, and add the '.min.js' or just '.js' to the end of your file. There will be few times when you will need to debug something specifically in production, and this should cover 95% of your debugging cases or more.