Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How can I debug a minified JS in firebug?

Tags:

javascript

debugging

firefox

firebug


I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.

Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery

like image 418
Kumar Avatar asked Mar 22 '11 04:03

Kumar

People also ask

How do I debug a minified js file?

Open developer tools in chrome by pressing F12 /Ctrl + Shift + I/ right-click anywhere inside the web page and select Inspect/Inspect Element which will be mostly the last option. Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.

Can you un Minify JavaScript?

You can't unminify a minified file. Minification is a desctructive operation and involves loss of information. For example, if you have a function with a descriptive name, after minifcation that name will be substitute with a meaningless one.

How do we debug a script in JavaScript?

In the debugger window, you can set breakpoints in the JavaScript code. At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values. After examining values, you can resume the execution of code (typically with a play button).

2 Answers

  1. Beautify your script
  2. Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
  3. Host the beautified version and everything that you need on said web server
  4. Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.
like image 115
rsp Avatar answered Oct 12 '22 03:10

rsp

Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)

like image 42
Kyle Heironimus Avatar answered Oct 12 '22 03:10

Kyle Heironimus
Sign in to Comment

Related questions

Re-throwing exception in NodeJS and not losing stack trace
What is the meaning of an Underscore in javascript function parameter?
Unique device identification
react componentDidMount not firing
How to use division in JavaScript
How to call a JavaScript function within an HTML body
Will a browser give an iframe a separate thread for JavaScript?
Angular JS custom delimiter
Using JQuery hover with HTML image map
Scope Chain in Javascript
Why does knockout.js have a reputation for being better for small projects, backbone.js for big?
Prevent zoom cross-browser
What is the difference between isomorphic-fetch and fetch?
React.js: setState overwriting, not merging
Checking if writeFileSync successfully wrote the file
Chrome Autofill/Autocomplete no value for password
AngularJS Directive Passing String
Accessing $scope in AngularJS factory?
HTML tags in i18next translation
How do you handle oncut, oncopy, and onpaste in jQuery?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!