1.1 版本

1.2 應用場景

「開發者除錯」預覽可以分為：預覽初始效果+調整佈局：

1）預覽：若範本在開發者除錯預覽下效果正常，那麼 PC 端預覽的效果一定正常。且因為 自適應 的縮放邏輯以範本初始效果為基準，所以若在開發者除錯下預覽效果較好，範本自適效果也會比較好。

2）除錯：當製作範本時遇到比較複雜的樣式需求，使用開發者除錯預覽方式，可以直接在範本預覽介面調整組件的尺寸、佈局等，點選儲存後即時生效，實現所見即所得。操作示範如下：

1.3 功能简介

範本預覽方式下拉即可看到「開發者除錯」選項，滑鼠懸浮時提示：點選後範本將切換至瀏覽器除錯，點選後即可在瀏覽器中調整範本的佈局，實現所見即所得。

注：若是舊版決策報表，需點選快捷工具欄處「轉換至新版」按鈕，轉換後才可使用開發者除錯預覽。

需要注意的是，範本使用開發者除錯預覽後，設計器會關閉並鎖定該範本，鎖定狀態下設計器無法開啟範本，如下圖所示：

新建決策報表預設為新自適應模式，預覽方式點選「開發者除錯」選項，即可進入功能介面。

舊決策報表可透過設計器快捷工具欄「轉換至新版」按鈕調整成新自適應範本，調整後，預覽方式處新增「開發者除錯」選項，點選該選項，即可進入功能界面。

透過 URL 訪問報表時，也支援「開發者除錯」，只需要在 URL 後面加個字尾參數：&op=editable_preview即可。

註1：遠端設計時只有擁有該範本設計權限的使用者能夠訪問該範本的開發者除錯 URL ，其他使用者訪問會提示無權限。

註2：範本使用開發者除錯預覽後，設計器會關閉並鎖定該範本，鎖定狀態下設計器無法開啟範本，如下圖所示。

2.1 調整組件位置

游標懸浮在組件上方，按住滑鼠左鍵拖動即可調整組件位置，如下圖所示:

拖動時可以使用輔助線( 當組件邊框對齊時出現紅色輔助線 )和自動吸附功能( 靠近對齊位置時自動吸附 )對齊其他組件。

選中組件時，左上角會出現一個紅底白字的矩形提示框，這個是組件的橫縱向位置座標，可以用這個座標輔助確定組件是否對齊。

2.2 調整組件大小

選中組件後，框線會出現 8 個從不同角度調整組件大小的白點，游標懸浮在這些點上拖動即可。

調整大小時也支援鎖定組件比例，選中組件，組件右上方出現懸浮工具欄，點選裡面的「鎖定組件比例」按鈕，這樣可以保持組件寬高比例不變。

2.3 調整組件層級

組件疊加時，選中組件，組件右上方出現懸浮工具欄，點選裡面的「置於頂層」、「置於底層」、「上移一層」、「下移一層」即可調整組件的顯示層級，如下圖所示。

註：組件層級內容重疊時，會按照層級設置顯示最頂層內容。

2.4 儲存和撤銷改動

開發者除錯時，頁面上方有個工具面板，裏面有 4 個工具，其作用分別如下：

• 儲存：對佈局和組件進行改動了之後，點選「儲存」按鈕可以儲存這些改動，設計器裡的範本生效。

• 撤銷：撤銷改動的操作，最多支援撤銷 5 步。

• 還原：還原撤銷的動作，最多支援還原 5 步。

• 取消固定：這個工具面板預設是固定住的，點選這個按鈕後，工具面板在游標離開這個區域後會自動隱藏。

瀏覽器端第一次點選「儲存」按鈕時，會彈出如下對話框，但關閉後該對話框後，只要瀏覽器的 cookies 不清理 後面就不會再次彈出了。

2.5 URL存取開發者除錯

透過 URL 存取報表時，也支援開發者除錯，只需要在 URL 後面加個後綴參數：&op=editable_preview

例如要查看伺服器下的範本：簡單儀表板.frm

只需要在瀏覽器位址欄輸入：http://localhost:8075/webroot/decision/view/report?viewlet=簡單儀表板.frm&op=editable_preview

注：遠端設計時只有擁有該範本設計權限的使用者能夠存取該範本的開發者除錯 URL ，其他使用者存取會提示無權限。

2.6 body自适应布局的影响

如果模板的 body 是自适应布局，那么开发者调试时不支持调整组件位置、组件层级，只能调整组件大小，且组件之间大小会相互影响。

绝对布局没有限制，支持上述所有的调整操作。

2.7 巢狀組件特殊操作

Tab 塊和絕對畫布塊都可以巢狀其他組件，它們在開發者除錯有一些特殊操作，如下表所示。