使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库
屏幕截图
HTML Custom Elements
标注
Base64 image
iframe
可拖拽
iframe 嵌套 iframe
iframe 包含 复制的 HTML 页面 和支持可以拖拽的工具栏
鼠标经过上面，智能识别 block 元素，高亮突出显示
mouseover / hover
CSS 黑科技
UI 结构检测，加 1px 边框
// UI 结构检测，加 1px 边框
[].forEach.call($$("*"), function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
// OR
Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`);
Command Line API
Chrome
$;
ƒ $(selector, [startNode]) { [Command Line API] }
$$;
ƒ $$(selector, [startNode]) { [Command Line API] }
Google Translate
发送反馈
有反馈意见？我们非常期待收到您的宝贵意见，但请勿透露敏感信息。有问题？请访问帮助中心或联系支持团队。
附上屏幕截图
屏幕截图预览
点击可突显或隐藏信息
要出于法律原因请求更改内容，请前往法律帮助页面。系统可能会将部分帐号和系统信息发送给 Google。
我们将根据我们的隐私权政策和服务条款使用您提供的信息帮助解决技术问题和改进我们的服务。
发送
标上黄色可用于突显问题，涂黑则可用来隐藏敏感信息
标注
Base64 image
HTML Custom Elements
<div key="feedback-panel-container" style="">
<uf-annotate-page>
<div style="align-items: center; display: -webkit-flex; flex-direction: column; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2;">
<div aria-atomic="true" aria-live="polite" style="background-color: rgba(255, 255, 255, 0.6); border-radius: 12px; color: rgb(117, 117, 117); font: 400 34px / 40px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin-bottom: 72px; padding: 22px 0px; text-align: center; visibility: hidden; width: 656px;">标上黄色可用于突显问题，涂黑则可用来隐藏敏感信息</div>
<div key="toolbar" role="toolbar" style="align-items: center; background-color: white; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px, rgba(0, 0, 0, 0.2) 0px 11px 15px -7px; cursor: pointer; display: -webkit-inline-flex; flex-direction: row; height: 56px; min-width: 232px; pointer-events: auto;">
<div key="grippy" role="button" aria-describedby="ADC667D4-7BC0-4A0C-8441-CE1CEC590BEB" style="cursor: -webkit-grab; height: 56px; padding: 0px 12px; position: relative;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="Drag" fill="#BDBDBD" height="56" width="16" viewBox="-2 2 12 12"><circle cx="1.5" cy="1.5" r="1.5"></circle><circle cx="1.5" cy="7.5" r="1.5"></circle><circle cx="1.5" cy="13.5" r="1.5"></circle><circle cx="6.5" cy="1.5" r="1.5"></circle><circle cx="6.5" cy="7.5" r="1.5"></circle><circle cx="6.5" cy="13.5" r="1.5"></circle>
</svg>
<div id="ADC667D4-7BC0-4A0C-8441-CE1CEC590BEB" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">移动工具栏</div>
</div>
<uf-annotator-button key="highlight" style="display: -webkit-flex; position: relative;">
<button type="button" aria-pressed="true" aria-describedby="F801D60C-16A7-4E50-9E21-2F57D94C4C7D" key="highlight" style="align-items: center; background-color: rgb(224, 224, 224); border: none; box-sizing: border-box; cursor: pointer; display: -webkit-flex; justify-content: center; outline: none; padding: 10px; pointer-events: auto; position: relative; height: 56px; width: 56px;">
<span style="display: inline-block; position: relative; height: 36px; width: 36px;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" height="36" width="36" fill="#FDD835"><path d="M3 3h18v18H3z"></path></svg>
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#757575" viewBox="0 0 24 24" height="36" width="36" style="left: 0px; position: absolute; top: 0px;"><path d="M21 17h-2.58l2.51 2.56c-.18.69-.73 1.26-1.41 1.44L17 18.5V21h-2v-6h6v2zM19 7h2v2h-2V7zm2-2h-2V3.08c1.1 0 2 .92 2 1.92zm-6-2h2v2h-2V3zm4 8h2v2h-2v-2zM9 21H7v-2h2v2zM5 9H3V7h2v2zm0-5.92V5H3c0-1 1-1.92 2-1.92zM5 17H3v-2h2v2zM9 5H7V3h2v2zm4 0h-2V3h2v2zm0 16h-2v-2h2v2zm-8-8H3v-2h2v2zm0 8.08C3.9 21.08 3 20 3 19h2v2.08z"></path>
</svg>
</span>
</button>
<div id="F801D60C-16A7-4E50-9E21-2F57D94C4C7D" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">突显问题</div>
</uf-annotator-button>
<uf-annotator-button key="blackout" style="display: -webkit-flex; position: relative;">
<button type="button" aria-pressed="false" aria-describedby="429CB63E-C571-47F8-A9FF-31D8740609BD" key="blackout" style="align-items: center; background-color: rgb(255, 255, 255); border: none; box-sizing: border-box; cursor: pointer; display: -webkit-flex; justify-content: center; outline: none; padding: 10px; pointer-events: auto; position: relative; height: 56px; width: 56px;">
<span style="display: inline-block; position: relative; height: 36px; width: 36px;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" height="36" width="36" fill="#000"><path d="M3 3h18v18H3z"></path></svg>
</span>
</button>
<div id="429CB63E-C571-47F8-A9FF-31D8740609BD" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">隐藏敏感信息</div>
</uf-annotator-button>
<uf-material-button key="done" style="display: inline-flex;">
<label style="align-items: center; align-self: stretch; box-sizing: border-box; cursor: pointer; display: -webkit-inline-flex; min-height: 48px; padding: 0px 8px; color: rgb(66, 133, 244); pointer-events: auto;">
<button type="button" key="done" style="background-color: transparent; border-color: transparent; border-radius: 2px; box-sizing: border-box; color: inherit; cursor: pointer; font: 500 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 36px; margin: 0px; min-width: 64px; opacity: 1; outline: none; padding: 0px 8px;">
<span style="pointer-events: none;">完成</span>
</button>
</label>
</uf-material-button>
</div>
</div>
</uf-annotate-page>
</div>
refs
xgqfrms
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
