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

时间:2015-04-01 15:58:25

标签: javascript breakpoints request-headers response-headers

不幸的是,虽然可以在生产中设置JavaScript断点,但不能在本地设置它们。在本地,在刷新时,JavaScript执行不受阻碍,就像没有设置断点一样。 (这已经在Mac OS X上的Chrome,Safari和FF中进行了测试。)

当前本地环境在JavaScript文件的标头中有所不同。

标题粘贴在下方。设置的标头是否有任何不同,这会在本地导致这种不良行为。

谢谢!

生产

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

2 个答案:

答案 0 :(得分:5)

如果你想强制断点并且你在本地,你总是可以在JavaScript文件中删除一个调试器语句:

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

当你推向生产时,你必须删除这些行,或者至少在你本地运行时构建一些逻辑来运行该行。但是这样你就可以确保只要你打开开发工具,执行就会在那个断点处停止。

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

答案 1 :(得分:2)

版本号是否随本地的每个请求/构建而变化?

  

header.top.min.js?版本= 1427902154

如果是,您的浏览器会将其视为不同的文件,您将丢失断点。这是设计原因,因为它包含在您的代码中的原因是打破您的缓存。

尝试将版本设置为dev中的常量,或者将它们全部删除。