jie's notes

Appearance

web前端开发调试技巧 ​

  • chrome作为前端开发最重要的工具之一，调试的技巧很多，这里将自己常用的技巧整理出来，持续更新中；(这些技巧来源于同事的分享、网上部分博客和自己的经验🎉)
  • 参考资料: https://developer.chrome.com/docs/devtools/ (这个是最权威官方资料，需要持续学习)；

console面板及console.log ​

  • 前端代码中关键地方的执行、接口的调用、正在开发某个组件时的参数等地方，使用console.log，配合上console面板过滤，比较直观明显的发现某个问题；
  • 很多开发问题都可以通过console面板及console.log来发现并解决，但是当然需配合其他技巧来提高效率，当这个方法解决不了问题时，一般也说明问题不是很简单；
  • 注意生产项目中的console需要及时清理，可以自己封装一个console的方法，或者配合webpack的uglifyjs插件进行清理(参考：清理console.log)；

network面板 ​

  • 巧用network面板的过滤操作: 通过过滤操作筛选请求链接；通过特定请求内容，来快速筛选是那个请求；

  • chrome开发时禁止缓存，勾选disable cache即可；

  • disable cache的作用就是修改了http请求的cache-control的字段，从而实现了禁止缓存（参考：disable cache）,这个也是前端面试中常问的http缓存的非常常见的例子，(被这个坑了几次了，换了个电脑忘记勾选了🤦‍♂️）；

React项目配套chrome插件 ​

  • 前提是：在开发React项目时开发阶段使用；

React Developer Tools插件 ​

  • chrome控制面板中会多出来一个Components面板，这个面板中会显示React项目中的组件，可以点击进入组件的详情页，查看组件的生命周期，可以查看组件的props和state，可以查看组件的渲染结果；
  • 应用场景: 对于一个特别大的项目，可以通过这个方法，快速发现页面中对应元素的组件信息，从而找到组件代码，进行开发;(当然啦，为了快速定位某个组件的逻辑代码，还有一些其它的方法，比如: 通过观察dom的element的结构，寻找附近典型的文案等信息，直接在代码中快速搜索；寻找一些标志性的信息，比如，某些button组件会附带上一些data-hottag,来做全局性的埋点监听，在element的看板中，看到这个标志性的信息后，可以在代码中快速搜索，从而定位到相关代码)；
  • 对于该组件的Profile面板，可以用来组件的性能分析，尤其时，当组件状态特别复杂，不小心写成无限re-render的时候，可以勾选Highlight updates，查看组件的更新情况(这个特别好用)；
  • 对于巨型项目，通过会面对触发了大量的action事件但是并不知道代码中是从哪里开始的，这个问题其实是很重要的，笔者亲身经历过这种类似的场景，比如通过redux的action面板，看到数据有些问题，但是action不知道是哪里触发的，借助redux的trace功能可以很好的解决这个问题，redux需要特殊配置下参数，webpack编译时要配置下devtool的格式，具体配置参考:

前端项目断点调试 ​

添加断点 ​

  • 通过断点，查找错误，调试错误；
  • 使用方法： 开发项目阶段，可以在对应代码的位置插入debugger(这种方法不推荐)，也可以直接通过chrome工具扩展按钮来search对应的关键代码，点击即可找到对应的文件，在需要调试的地方加上断点，当执行到对应的地方即可触发调试！

添加logpoint ​

performance面板监控 ​

chrome配置代理 ​

  • 通常指的代理就是想拦截请求，然后转发到另一个服务器；而对应我们项目开发中，遇到想让我们浏览器中的特定的请求转发到另一个服务器，通常有2个做法：（开发中推荐第二种方法）

mac全局代理 ​

  • 不使用chrome的插件，直接在mac中配置系统代理，所有的请求都会系统中的网络配置转发到我们的代理服务器，参考下图，(这个其实也是我们使用一些vpn软件的一个类似的原理)；开发项目中，我们可以转发到whistle代理中，通过whistle的rule配置进而转发到我们的真实的服务器上；（开发项目中，其实不推荐用这种系统代理的）

SwitchyOmega + whistle ​

  • 使用chrome的插件：SwitchyOmega(进行浏览器所有请求的转发)，参考下图，一般可以将想要的域名对应的接口先转到本地的whistle代理上，然后通过whistle的rule配置再转发到我们想要的服务器上；（注意，SwitchyOmega配置转发的host需要和whistle的host要一致，不一致的部分最终不能代理成功，这个地方也被坑了几次😭）
  • whistle配置代理的常用技巧:（主要结合正则使用） 配置跨域:
sh
* resCors://*

结合正则配置匹配路径:

sh
（本地的js可以利用npm包http-server来转发; 巧妙利用正则可以灵活的去代理）
/^https://puafafafafblic.gdtimg.com/static/onex/delivery/([\s\S]*)$/     http://127.0.0.1:8080/js/$1 
/https://adad.qq.com/atlas/[\s\S]*/ad/create/  http://127.0.0.1:8080/html/atlas/ad/create.shtml
/^https?:\/\/mp.weixafafafain.qafafq.com\/promotion\/readtemplate?((.+)t=(.+)\/([^&]+).*)$/ http://127.0.0.1:31001/html/$3/$4.html

利用whistle的value来mock接口:

sh
https://abc.com/bff/proxy/gdt-api/ad_manage/v1/dpbm/get_business_permission_result   tpl://{get_business_permission_result.json}