Ability to set JavaScript breakpoints in browser pointed at local environment

Question

Unfortunately, while JavaScript breakpoints can be set in production, they cannot be set in local. In local, on refresh, JavaScript execution proceeds unimpeded, as if no breakpoint had ever been set. (This has been tested in Chrome, Safari and FF on Mac OS X.)

The current local environment differs in the headers for JavaScript files.

The headers are pasted, below. Is there any difference in the headers being set, which would cause this undesirable behavior in local.

Thanks!

Production

General
Remote Address:23.235.33.207:80
Request URL:http://www.example.com/wp-content/themes/example/js/header.top.min.js?ver=1427752599
Request Method:GET
Status Code:200 OK (from cache)

Response Headers
Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Age:149381
Cache-Control:max-age=31536000
Connection:keep-alive
Content-Encoding:gzip
Content-Length:56250
Content-Type:application/javascript
Date:Wed, 01 Apr 2015 15:28:14 GMT
ETag:"2a5ce-5128893ad1780-gzip"
Last-Modified:Mon, 30 Mar 2015 21:58:06 GMT
Server:Apache
Varnish-X-Cache:HIT
Varnish-X-Cache-Hits:4259
Vary:Accept-Encoding
X-Cache:HIT
X-Cache-Hits:4259
X-Served-By:cache-jfk1021-JFK
X-Timer:S1427902094.409391,VS0,VE0

Request Headers
Provisional headers are shown
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36

Query String Parameters
ver:1427752599

Local

General
Remote Address:192.168.33.28:80
Request URL:http://example.local/wp-content/themes/example/js/header.top.min.js?ver=1427902154
Request Method:GET
Status Code:200 OK

Response Headers
Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:173487
Content-Type:application/javascript
Date:Wed, 01 Apr 2015 15:29:16 GMT
ETag:"2a5af-51294e60377c0"
Keep-Alive:timeout=5, max=100
Last-Modified:Tue, 31 Mar 2015 12:40:07 GMT
Server:Apache/2.4.6 (CentOS) OpenSSL/1.0.1e-fips PHP/5.6.7

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:optimizelyEndUserId=oeu1427902096929r0.009481394430622458; cn_adsqt=%7B%22count%22%3A1%2C%22expire%22%3A1427984897264%7D; cn_adcap=%7B%22count%22%3A1%2C%22expire%22%3A1427902697265%7D; mbox=session#1427902097343-248716#1427903958|PC#1427902097343-248716.25_59#1435678098; original_referrer=; PHPSESSID=h31joi3efmcp09mgj2t2988jl6; s_pers=%20s_campaign%3D%7C1427903898400%3B%20s_vnum_m%3D1430452800405%2526vn%253D1%7C1430452800405%3B%20sinvisit_m%3Dtrue%7C1427903898405%3B%20s_nr%3D1427902098411%7C1430494098411%3B%20s_eVar10%3D%7C1427903898416%3B%20s_depth%3D1%7C1427903898418%3B%20gpv_p5%3Dhomepage%7C1427903898424%3B; s_sess=%20s_cc%3Dtrue%3B%20s_sq%3D%3B; cookies.js_domain_test=1; _parsely_session={%22sid%22:1%2C%22surl%22:%22http://example.local/%22%2C%22sref%22:%22%22%2C%22sts%22:1427902099180%2C%22slts%22:0}; _parsely_visitor={%22id%22:%226c45a1ff-1b3b-4b17-97bd-79418e00d7c3%22%2C%22session_count%22:1%2C%22last_session_ts%22:1427902099180}; __gads=ID=bb7813438602a520:T=1427902100:S=ALNI_MYtP9UgANEBxufSca4E_ceSJBvFkg; optimizelySegments=%7B%222494890534%22%3A%22false%22%2C%222501230342%22%3A%22direct%22%2C%222501840319%22%3A%22none%22%2C%222515720226%22%3A%22gc%22%7D; optimizelyBuckets=%7B%7D; optimizelyPendingLogEvents=%5B%22n%3Dhttp%253A%252F%252Fexample.local%252F%26u%3Doeu1427902096929r0.009481394430622458%26wxhr%3Dtrue%26t%3D1427902156634%26f%3D2725330192%26g%3D%22%5D
Host:example.local
Referer:http://example.local/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36

Query String Parameters
ver:1427902154

Answer 1

If you want to force a breakpoint and you're in local, you can always drop a debugger statement inside the JavaScript file:

// code that does something
if (runningLocally) {
debugger;
}
// code that does something

You'll have to delete those lines when you push to production, or at least build some logic to run the line only when you're running locally. But this way you can ensure execution will halt at that breakpoint whenever you have dev tools open.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger