如何在审查Instagram组件代码时获取完整视频URL

页面上被截断显示的视频URL示例

你在元素面板看到的带省略号的链接，是开发者工具为了优化显示做的文本截断，不是属性值本身被截断，不需要从显示的文本里提取完整地址，直接用下面几个方法就能拿到完整src：

• 直接复制元素属性
  定位到实际的<video>标签（不要选外层包裹的div，视频地址不会存在外层容器上），右键点击该标签，依次选择「Copy」-「Copy attribute value」，在弹出的属性列表里选src，复制出来的内容就是完整无截断的视频地址。也可以在元素面板右侧的Properties栏找到src字段，直接复制对应值。
• 从网络请求面板抓取
  打开开发者工具的Network面板，在筛选栏选择Media类型，刷新页面或者触发视频播放，面板里出现的MP4格式请求就是对应视频源，右键该请求选择「Copy link address」即可拿到完整直链，这个方法不受页面元素渲染逻辑影响，准确率最高。
• 控制台快速提取
  选中<video>标签后，控制台会自动将当前选中元素赋值给临时变量$0，直接在控制台输入$0.src按下回车，控制台输出的结果就是完整视频地址，右键复制输出内容即可。

注意不要在外层div里找地址，Instagram的视频源地址只会绑定在<video>标签或者它内部的<source>子标签上，找错元素层级自然拿不到完整值。

内容的提问来源于stack exchange，提问作者atropa belladona