快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容:
开发一个脚本,用于在Ubuntu系统上自动配置Chrome浏览器以支持Web开发。功能包括:1. 安装Chrome开发者工具;2. 配置远程调试端口;3. 设置常用开发扩展(如React Developer Tools、Vue.js devtools)。使用Bash脚本实现,确保一键完成所有配置。- 点击'项目生成'按钮,等待项目生成完整后预览效果
在Ubuntu系统上配置Chrome浏览器进行Web开发,往往需要反复安装插件、调整设置,过程繁琐。最近尝试用Bash脚本自动化这一流程,效果出乎意料地好,分享下具体实现思路和踩坑经验。
环境准备与Chrome安装
首先确保系统已安装最新版Chrome。通过官方仓库安装比直接下载deb包更便于后续更新。脚本中需要添加Google的APT源,然后执行安装命令。这里有个细节:如果系统已有其他Chromium分支,建议先卸载避免冲突。开发者工具基础配置
Chrome默认已包含开发者工具,但需要手动开启实验性功能。通过脚本修改用户配置文件,自动启用"Allow remote debugging"和"Disable same-origin policy"等选项。这些设置在开发跨域应用时尤其重要。远程调试端口设置
移动端调试或Headless测试时需要远程调试端口。脚本通过修改Chrome启动参数,固定9222端口并开放局域网访问权限。注意Ubuntu防火墙需要同步调整,否则外部设备无法连接。开发扩展自动化安装
核心难点在于扩展的静默安装。Chrome扩展本质是crx文件,但直接安装需要开发者模式。解决方案是通过脚本下载扩展的CRX文件,然后修改本地扩展配置文件实现自动加载。实测对React/Vue开发工具、Redux调试器等常用扩展都有效。用户偏好预设
开发常用的设置如禁用缓存、开启详细日志等,可以通过修改Preferences文件实现。脚本会备份原配置后写入优化参数,比如将开发者工具面板默认布局改为靠右,更适合宽屏显示器。
错误处理与日志记录
脚本增加了每一步的状态检查:若Chrome进程正在运行则自动关闭,安装失败时回滚操作,所有操作记录到/var/log/chrome-dev-setup.log。这对排查apt源不可用、扩展下载失败等问题很有帮助。多用户环境适配
系统可能存在多个用户账户,脚本通过读取/etc/passwd自动识别所有普通用户,为每个用户的Chrome配置单独初始化。特别处理了Flatpak版Chrome的配置文件路径差异问题。一键执行与验证
最终脚本只需sudo权限即可运行,完成后自动启动Chrome并打开chrome://extensions页面验证插件安装情况。输出绿色成功标志前会检查所有关键配置项的实际生效状态。
这套方案在团队内部推广后,新成员开发环境准备时间从原来的1小时缩短到3分钟。最近在InsCode(快马)平台上看到类似的一键环境配置功能,试了下他们的Web IDE直接集成浏览器调试工具,不用装本地环境就能实时预览页面改动,对临时测试特别友好。平台还自带终端和Git支持,配合这种自动化脚本思路,感觉能玩出更多效率提升的花样。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容:
开发一个脚本,用于在Ubuntu系统上自动配置Chrome浏览器以支持Web开发。功能包括:1. 安装Chrome开发者工具;2. 配置远程调试端口;3. 设置常用开发扩展(如React Developer Tools、Vue.js devtools)。使用Bash脚本实现,确保一键完成所有配置。- 点击'项目生成'按钮,等待项目生成完整后预览效果