继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第6天 Webpack、VSCode、真机调试技巧

小小win
关注TA
已关注
手记 22
粉丝 0
获赞 0

第一模块 学习课程

名称: 六大场景 梳理开发痛点 解锁前端进阶路

章节名称:

5-1 三类真机调试技巧

5-2 如何调试webpack?如何配置VSCode调试?

讲师: Brian

第二模块 课程内容

Android + chrome 调试

  1. chrome打开开发者调试模式

    http://img2.sycdn.imooc.com/631cacf20001ec7408910565.jpg

  2. 搜索各个手机如何进行开发者模式(如上述手机是点击版本号)

  3. 设置 -> 开发人员选项 -> 开发人员选项打开 -> 保持唤醒状态 -> 允许USB调试 

  4. chrome自动会和手机浏览器进行连接

Fiddler/ Charles 劫持

Charles

手机设置HTTP代理连接到服务器 -> 访问http请求 -> Charles所有请求都进行拦截


console.log(webpackconfig) in webpack.config.js


使用node调试 

npx node -inspect-brk ./node_modules/.bin/webpack -inline -progress

这时候终端工具在等待连接

http://img3.sycdn.imooc.com/631cb2b200013c1807440555.jpg

点击inspect就会打开调试窗口


debugger --> 添加断点


可以把脚本放到js里面

http://img1.sycdn.imooc.com/631cb37800019df005660092.jpg


VSCode左边栏小虫子添加node.js配置

launch.json

第三模块 学习收获

我们可以使用Nodemon联合VSCode进行开发热加载调试

Koa应用中支持ES6语法

在VSCode上进行配置调试断点执行


第四模块 学习打卡截图

http://img1.sycdn.imooc.com/631cae700001980e08900566.jpg

http://img4.sycdn.imooc.com/631cb0ed0001d81007770571.jpg















打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP