2019.04.25

[视频] Ben Awad 展示 Chrome DevTools 使用技巧，比如直接获取 title 元素，可以在 console 中使用 $('title') 的方式，比如在 Toggle device toolbar 点击上面的浮动元素可以任意切换移动端设备大小：https://www.youtube.com/watch?v=4sZJASynNcY (opens new window)

[工具] 基于浏览器的在线代理软件，可以直接访问 Google、YouTube 等网站，在线测试 (opens new window)：https://github.com/EtherDream/jsproxy (opens new window)

[类库] use-http 可以在 React Hook 中发起一个 Request 请求：https://github.com/alex-cory/use-http (opens new window)

[类库] 使用 HTML5 API 进行录音，可以把音频导出 mp3、wav、ogg、webm、amr 格式，支持 PC 和 Android、iOS 部分浏览器，微信也是支持的：https://github.com/xiangyuecn/Recorder (opens new window)

配图 - Chrome DevTools 使用技巧

配图 - HTML 录音

示例 - download-git-repo

import useFetch from 'use-http'

function App() {
  const options = { // accepts all `fetch` options
    onMount: true // will fire on componentDidMount
  }
  
  var [data, loading, error, request] = useFetch('https://example.com', options)
  
  // want to use object destructuring? You can do that too
  var { data, loading, error, request } = useFetch('https://example.com')
  
  const postData = () => {
    request.post({
      no: 'way',
    })
  }

  if (error) return 'Error!'
  if (loading) return 'Loading!'
  
  return (
    <>
      <button onClick={postData}>Post Some Data</button>
      <code>
        <pre>{data}</pre>
      </code>
    </>
  )
}

今日图 - 当我测试新同事写的代码的时候