使用 Canvas 實現一個類似 Google 的可視化的頁面錯誤反饋庫

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

https://translate.google.cn/?sl=en&tl=zh-CN&text=%3F%3F%3F&op=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 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---