能够在指向本地环境的浏览器中设置 JavaScript 断点

Question

不幸的是，虽然 JavaScript 断点可以在生产中设置，但不能在本地设置。在本地，刷新时，JavaScript 执行不受阻碍，就好像从未设置过断点一样。（这已在 Chrome、Safari 和 FF Mac OS X 上进行了测试。）

JavaScript 个文件的 headers 当前本地环境不同。

下面粘贴了headers。设置的 headers 是否有任何差异，这会导致本地出现这种不良行为。

谢谢！

生产

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

本地

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

如果你想强制断点并且你在本地，你总是可以在 JavaScript 文件中放置调试器语句：

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

当您投入生产时，您必须删除这些行，或者至少仅当您在本地运行时才为运行行构建一些逻辑。但是通过这种方式，您可以确保只要打开开发工具，执行就会在该断点处停止。

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

Answer 2

版本号是否随您所在地区的每个 request/build 而变化？

header.top.min.js?ver=1427902154

如果是这样，您的浏览器会将其视为不同的文件，您将失去断点。这是设计使然，因为它包含在您的代码中是为了破坏您的缓存。

尝试在 dev 中将版本设置为常量，或者将其全部删除。

能够在指向本地环境的浏览器中设置 JavaScript 断点

Ability to set JavaScript breakpoints in browser pointed at local environment

javascript

breakpoints

request-headers

response-headers

生产

本地