DebugTiming

Demo地址

页面资源/接口耗时监听可视化。performance的resource在监听接口的时候检测不出同名接口不同参数的接口区分，而且network耗时是不包含js执行耗时，所以增加XMLHttpRequest和fetch的接口调用耗时监听

debug图标显示/隐藏快捷键 shift + alt + G

API

| 参数 | 类型 | 说明 | 必填 | 默认值 | | :--- | :--- | :--- | :----: | :---- | | isDrag | boolean | 按钮是否需要拖拽 | 否 | true | | autoPos | boolean | 按钮是否需要自动靠边 | 否 | true | | size | number | 按钮大小 | 否 | 34 | | placement | 't','tr','rt','r','rb','br','b','bl','lb','l','lt','tl' | 按钮默认位置 | 否 | 'br' | | alwaysShow | boolean | 是否一直显示debug Icon | 否 | false | | Icon | ReactElement | 自定义icon | 否 | - |

npm i debug-timing -D
yarn add debug-timing -D

import DebugTiming from 'debug-timing';

const App = () => {
  return (
    <div>
      {content}
      <DebugTiming />
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById('Demo'),
);