背景
做過移動端開發(fā)的都知道沿腰，Android 和iOS在開發(fā)時可以查看頁面的圖層結(jié)構(gòu)览徒，RN也可以很方便的查看圖層結(jié)構(gòu)進行調(diào)試，那flutter如何進行可視化調(diào)試呢颂龙？
可視化調(diào)試
其實flutter官網(wǎng)上對可視化調(diào)試已有相關的介紹《Flutter中文網(wǎng)》习蓬。
flutter的rendering庫中提供了一些標志位纽什，可以通過設置標志位為true來進行可視化調(diào)試。 這些標志可以在任何時候啟用躲叼，并在為true時影響繪制芦缰。 設置它的最簡單方法是在void main()的頂部設置。
以下代碼只粘出了部分標志位：
/// Causes each RenderBox to paint a box around its bounds, and some extra
/// boxes, such as [RenderPadding], to draw construction lines.
///
/// The edges of the boxes are painted as a one-pixel-thick `const Color(0xFF00FFFF)` outline.
///
/// Spacing is painted as a solid `const Color(0x90909090)` area.
///
/// Padding is filled in solid `const Color(0x900090FF)`, with the inner edge
/// outlined in `const Color(0xFF0090FF)`, using [debugPaintPadding].
bool debugPaintSizeEnabled = false;
/// Causes each RenderBox to paint a line at each of its baselines.
bool debugPaintBaselinesEnabled = false;
/// Causes each Layer to paint a box around its bounds.
bool debugPaintLayerBordersEnabled = false;
/// Causes objects like [RenderPointerListener] to flash while they are being
/// tapped. This can be useful to see how large the hit box is, e.g. when
/// debugging buttons that are harder to hit than expected.
///
/// For details on how to support this in your [RenderBox] subclass, see
/// [RenderBox.debugHandleEvent].
bool debugPaintPointersEnabled = false;
/// Overlay a rotating set of colors when repainting layers in checked mode.
///
/// See also:
///
/// * [RepaintBoundary], which can be used to contain repaints when unchanged
/// areas are being excessively repainted.
bool debugRepaintRainbowEnabled = false;
/// Overlay a rotating set of colors when repainting text in checked mode.
bool debugRepaintTextRainbowEnabled = false;
所有這些標志只能在調(diào)試模式下工作枫慷。通常让蕾，F(xiàn)lutter框架中以“debug...” 開頭的任何內(nèi)容都只能在調(diào)試模式下工作。
debugPaintSizeEnabled啟用時或听，所有的盒子都會得到一個明亮的深青色邊框探孝，padding（來自widget如Padding）顯示為淺藍色，子widget周圍有一個深藍色框誉裆， 對齊方式（來自widget如Center和Align）顯示為黃色箭頭. 空白（如沒有任何子節(jié)點的Container）以灰色顯示顿颅。
debugPaintBaselinesEnabled做了類似的事情，但對于具有基線的對象找御，文字基線以綠色顯示元镀，表意(ideographic)基線以橙色顯示。
debugPaintPointersEnabled標志打開一個特殊模式霎桅，任何正在點擊的對象都會以深青色突出顯示栖疑。 這可以幫助您確定某個對象是否以某種不正確地方式進行hit測試（Flutter檢測點擊的位置是否有能響應用戶操作的widget）,例如，如果它實際上超出了其父項的范圍滔驶，首先不會考慮通過hit測試遇革。
如果您嘗試調(diào)試合成圖層，例如以確定是否以及在何處添加RepaintBoundary widget揭糕，則可以使用debugPaintLayerBordersEnabled 標志萝快， 該標志用橙色或輪廓線標出每個層的邊界，或者使用debugRepaintRainbowEnabled標志著角， 只要他們重繪時揪漩，這會使該層被一組旋轉(zhuǎn)色所覆蓋。
使用步驟
如果使用的是AndroidStudio
1.首先第一步要導入render庫
import 'package:flutter/rendering.dart';
2.在任意函數(shù)內(nèi)設置標志位即可吏口，例如
void main() {
// debugPaintSizeEnabled = true;
// debugPaintPointersEnabled = true;
// debugPaintLayerBordersEnabled = true;
debugRepaintRainbowEnabled = true;
return runApp(MyApp());
}
3.重新運行即可看到效果
如果使用的是VSCode
在VS Code中奄容，只需要在Flutter App調(diào)試的過程中，打開命令面板（cmd+shift+p）,輸入
Flutter Toggle Debug Painting
效果圖
1. debugPaintSizeEnabled
展示所有盒子范圍
2. debugPaintPointersEnabled
展示可點擊區(qū)域范圍
3. debugPaintLayerBordersEnabled
所有l(wèi)ayer展示橙色邊框
4. debugRepaintRainbowEnabled
炫彩邊框效果
