时间戳

首页 > 解决方案 > Browsersync 使 Chrome 崩溃

php - Browsersync 使 Chrome 崩溃

问题描述

我在 MacBook Pro（8GB RAM）上运行 MAMP PRO 5.7。sitename.local.companyname.as使用 WordPress、nginx 和 MySQL 在端口 80 上加载网站。我还使用运行 composer、Gulp 和 browsersync 的 VSCode 来进行开发。Browsersync 设置为指向端口 8181 的代理。我们正在使用WP Rig开发 WordPress 网站。我们只http://在本地使用，而不是https://（目前）。

有一段时间，browsersync 和所有浏览器一起工作得很好。转到默认端口 80 上的站点继续正常工作，但在某些时候端口 8181 访问 ( http://sitename.local.companyname.as:8181) 刚刚停止工作。不仅如此，它还开始使 Chrome 和 Firefox 以及其他使用 http 连接发送和接收数据的应用程序（如项目管理软件“Hive”）崩溃。有时一些单独的标签会崩溃（主要是 Gmail 和 Google 日历标签）。有时整个浏览器会关闭。

我重新安装了 MAMP PRO 5.7，但问题仍然存在。我浏览了所有我能想到的 browsersync 和 npm 的东西，从它工作的时候到不工作的时候都没有改变。没有重新映像我的机器并从头开始，我不知道该怎么做。下面是一个典型npm run dev命令的输出。

username@machinename devfilesroot % npm run dev

> wprig@2.0.1 dev
> gulp

[09:02:46] Requiring external module @babel/register
[09:02:47] Using gulpfile ~/local/docroot/wp-content/themes/devfilesroot/gulpfile.babel.js
[09:02:47] Starting 'default'...
[09:02:47] Starting 'cleanCSS'...
[09:02:47] Finished 'cleanCSS' after 14 ms
[09:02:47] Starting 'cleanJS'...
[09:02:47] Finished 'cleanJS' after 1.94 ms
[09:02:47] Starting 'php'...
[09:02:47] Starting 'images'...
[09:02:47] Starting 'scripts'...
[09:02:47] Starting 'scripts'...
[09:02:47] Starting 'scripts'...
[09:02:47] Starting 'scripts'...
[09:02:47] Starting 'styles'...
[09:02:47] Finished 'scripts' after 324 ms
[09:02:49] Finished 'scripts' after 2.18 s
[09:02:49] Finished 'scripts' after 2.19 s
[09:02:49] gulp-imagemin: Minified 0 images
[09:02:49] Finished 'images' after 2.37 s
[09:02:50] Finished 'scripts' after 2.85 s
[09:02:51] Finished 'styles' after 4.26 s
[09:02:51] Starting 'editorStyles'...
[09:02:52] Finished 'editorStyles' after 270 ms
[09:02:52] Starting 'libStyles'...
[09:02:52] Finished 'libStyles' after 4.1 ms
[09:03:02] Finished 'php' after 15 s
[09:03:02] Starting 'serve'...
[09:03:02] Finished 'serve' after 6.5 ms
[09:03:02] Starting 'watch'...
[Browsersync] Proxying: http://sitename.local.companyname.as:8181
[Browsersync] Access URLs:
 --------------------------------------
      Local: http://localhost:8181
      External: http://192.168.1.120:8181
 --------------------------------------
      UI: http://localhost:3001
      UI External: http://localhost:3001
 --------------------------------------

如您所见，Local它输出的 URL 与我的sitename.local.companyname.as域方案不同。当它工作时，我只需将sitename.local.companyname.as:8181其放入 URL 栏中，它的工作方式与 'localhost:8181' 相同。但即使这样现在也行不通。

这是我dev.browsersync.bypassPort在~/local/docroot/wp-content/themes/devfilesroot/config/config.local.json.

{
  "dev": {
    "browserSync": {
      "https": false,
      "proxyURL": "http://sitename.local.companyname.as:8181",
      "keyPath": "/etc/letsencrypt/live/local.companyname.as/privkey.pem",
      "certPath": "/etc/letsencrypt/live/local.companyname.as/cert.pem",
      "open": false
    }
  }
}

记忆：

基线是

Physical Memory: 8.00 GB
Memory Used: 6.26 GB
  App Memory: 2.08 GB
  Wired Memory: 1.03 GB
  Compressed: 2.51 GB 
Cached Files: 1.29 GB
Swap Used: 0 bytes

当我运行时npm run dev：

Physical Memory: 8.00 GB
Memory Used: 6.60 GB
  App Memory: 2.99 GB
  Wired Memory: 1.07 GB
  Compressed: 1.89 GB 
Cached Files: 1.34 GB
Swap Used: 0 bytes

npm run dev 使用 23 MB

Gulp 使用 252 MB

MAMP Pro 使用 261 MB

知道我还能调查什么吗？

标签： phpnode.jswordpressbrowser-syncmamp-pro

解决方案

问题出在我的 config.local.json 中的这一行：

"proxyURL": "http://sitename.local.companyname.as:8181",

需要的只是

"proxyURL": "sitename.local.companyname.as",

该8181部分是从 config.default.json 文件中提取的"bypassPort": "8181",. 但为了更加确定，我通过将其添加到 config.local.json 文件来覆盖它。

推荐阅读