React除錯工具：react-devtools

阿新 • • 發佈：2019-01-25

<!DOCTYPE html>
<html>
    <head
        <script src="../build/react.js"></script><!--react核心庫-->
        <script src="../build/react-dom.js"></script><!--提供與DOM相關的功能-->
        <script src="../build/browser.min.js"></script><!--將JSX語法轉化為JavaScript的語法--> 

    </head>
    <body>
        <div id="root">

        </div>

        <script type="text/babel">//使用JSX
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById("root")
            )

        </script>
    </body 
>
</html>

開啟index01.html,開啟控制檯：
這裡寫圖片描述

怎麼解決？
(1)安裝react-devtools：

npm install -g react-devtools

(2)執行 react-devtools：

react-devtools

出現：
這裡寫圖片描述

根據提示進行相應操作。

React DOM情況下：把<script src="http://localhost:8097"></script> 新增到引入React DOM之前：
即：

<!DOCTYPE html>
<html>
    <head
 
         <script src="http://localhost:8097"></script>
        <script src="../build/react.js"></script><!--react核心庫-->
        <script src="../build/react-dom.js"></script><!--提供與DOM相關的功能-->
        <script src="../build/browser.min.js"></script><!--將JSX語法轉化為JavaScript的語法-->
    </head>
    <body>
       //...
    </body>
</html>

再次執行react-devtools，開啟index01.html，
這裡寫圖片描述

React除錯工具：react-devtools

<!DOCTYPE html> <html> <head <script src="../build/react.js"></sc

react除錯工具react -devtools的安裝

前言 react-devtools是什麼？ react-devtools是一款由 facebook

ReactJS學習系列課程（React 除錯工具集）

學習React過程中，我們一定知道，React有兩個檢視，一個虛擬機器DOM,也就是我們建立的Component，另一個就是渲染到頁面中的view，這也就導致我們除錯過程中會有一定的障礙，所以我們嘗試一下：這是一個全新的除錯工具，名字是New Reac

React與前端：React家族介紹

我曾在微博上說過“React就是哪吒”，那麼一個前端框架和哪吒有什麼關係呢？其實我覺得二者有某些相似的地方。哪吒家室顯赫，擁有的神器多到需要三頭六臂才能拿得過來，後來經歷磨難，脫胎換骨，能夠獨當多面。 React源自Facebook，集多項特色於一身——元件化、宣告式、虛擬DOM、區域

React UI 庫：React Suite 3.4.5 版本更新

React Suite 是一套 React 元件庫，為後臺產品而生。文件: https://rsuite.gitee.io Discord: https://discord.gg/R8mnjwh Gitter: https://gi

React學習(一)：React入門

一 React 的優點 1.響應式渲染 React 最大的優點在於其響應式渲染，相對於傳統的更新整個頁面的緩慢而言，React 會生成一個虛擬的DOM，當用戶進行操作使狀態有所變化時，React會計算

React UI 庫：React Suite 3.5.2 版本更新

React Suite 是一套 React 元件庫，為後臺產品而生。文件: https://rsuite.gitee.io 設計: https://rsuite.gitee.io/design/ V3.5.2 版本釋出，更新內容如下

Django 除錯工具：Django Debug Toolbar

Django Debug Toolbar的安裝 sudo pip install django-debug-toolbar 在settings.py裡的INSTALLED_APPS 增加：’debu

React-Native開發：react-native-file-selector選擇檔案元件的使用（安卓）

為了上傳檔案，搜尋了很多資料終於找到選擇本地檔案並獲取到具體路徑的元件，可以在github上查詢到該元件以下為該元件使用前的引入工作： 1、npm install react-native-file-selector --save 2、react

React模組開發redux-devtools-extension除錯工具

用法注意，從v2.7開始, window.devToolsExtension 被重新命名為 window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_

npm 安裝React Devtools除錯工具

有時候沒有科學上網工具時，怎麼安裝React DevTool, 其一直接搜尋到Chrome的外掛安裝即可. 其二，可以通過下載github上的react-devtools，然後打包，最後匯入chrome中, 具體如下： 1. $ git clone https://github.com/faceboo

2分鐘 npm 安裝React Devtools除錯工具

去git上下載react-devtools檔案到本地，下載地址： https://github.com/facebook/react-devtools ；可以直接下載zip安裝包解壓，或者通過git clone來將專案拷貝到本地 git clone https://gith

react native項目增加devtools工具

info audio nbsp AD dev pos ack clas yarn 第一步：安裝react devtools工具在當前項目中打開命令行，添加react devtools工具，因為運行的工具有九十幾M，下載時需要時間，請耐心等待 yarn add react

【React 實戰教程：第一節】從0到1 構建 github star管理工具：前期準備

前言在日常使用github中，除了利用git進行專案版本控制之外，最多的用處就是遊覽各式的專案，在看到一些有趣或者有用的專案之後，我們通常就會順手star，目的是日後再看。但是當我們star了許多專案之後，回過頭想找一個的專案就會發現，很難在短時間內找到它，官方也

用 nodejs 寫一個命令列工具：建立 react 元件的命令列工具

用 nodejs 寫一個命令列工具：建立 react 元件的命令列工具前言上週，同事抱怨說 react 怎麼不能像 angular 那樣，使用命令列工具來生成一個元件。對呀，平時工作時，想要建立一個 react 的元件，都是直接 copy 一個元件，然後做一些修改。為什麼不能將這個過程交給程式去做

React-Native環境配置及除錯工具

一、基本環境配置 1、安裝Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2、下載node.js:br

react-native 開發常用第三方工具：

ReactNative 開發常用第三方：樓主在 reactNative 開發中，經常會碰到自定義元件的問題，原生元件不夠用，經常需要我們自定義元件。或者需要npm使用第三方已經寫好的工具,

React開發除錯工具

1.外掛下載首先，下載react-eveloper-tools開發除錯工具外掛。谷歌下載.crx字尾的檔案，火狐下載.xpi字尾的檔案。 2.外掛安裝（以谷歌為例）將下載的外掛拖入谷歌瀏覽器，然後選中允許訪問檔案網址。 React Developer Too

react.js 之 create-react-app 命令行工具系統講解

全局變量 document 是什麽模板有一種 cut process 函數定義 pan react.js 教程之 create-react-app 命令行工具系統講解快速開始 npm install -g create-react-app creat

ReactNative學習之控件：react-native-calendars

wix 當前日期 sign for extra sta .com hid 默認 GitHub：https://github.com/wix/react-native-calendars 屬性介紹： current：設置當前日期，當前日期不設置默認是當日 minDate&

React除錯工具：react-devtools

相關推薦