1. 程式人生 > >ReactJS學習系列課程(React 除錯工具集)

ReactJS學習系列課程(React 除錯工具集)

這裡寫圖片描述

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

這是一個全新的除錯工具,名字是New React Devtools, 下面我們來看一下效果吧!

這裡寫圖片描述

這個外掛工具可以做哪些工作呢:

  • Tree view,樹形結構,可以看到和編輯所有的props, state。
  • Search component 通過name.
  • 控制面板,可以除錯store資料。

這裡寫圖片描述

我們來安裝一下吧:

  1. 下載chrome瀏覽器:
  2. 開啟google 拓展工具 (chrome://extensions)
  3. 拖拽我們剛剛下載的檔案,即可安裝。

安裝好以後,我們開啟除錯工具,會看到一個react的tab,執行你的react專案,就可以看到所寫component.

大家試一下吧!

相關推薦

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

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

ReactJS學習系列課程React ref的使用

在我學習React的過程當中,總會被一些名詞搞得暈頭轉向,但是細想起來又非常簡單,比如React定義的這個refs,其實就是用於獲取dom的一種方式。 在React中元件並不是真實的 DOM 節點,而是存在於記憶體之中的一種資料結構,叫做虛擬 DOM (v

ReactJS學習系列課程React mixin的使用

React是基於元件的,也就是整個專案是各個元件組合到一起的,這樣往往會用到通用的一些特性,這就衍生了mixin的概念。 其實,mixin,可以非常簡單的理解,他就是把 一個 mixin 物件上的方法都混合到了另一個元件上,和 es6的extend極為類似

ReactJS學習系列課程React學習總結

進來學習React, 下面來總結一下,主要有以下幾點: ReactJs是基於元件化的開發,所以最終你的頁面應該是由若干個小元件組成的大元件。 可以通過屬性,將值傳遞到元件內部,同理也可以通過屬性

ReactJS學習系列課程元件的生命週期

對於任何一個框架,或者元件而言,都有其生命週期的定義,比如從定義到銷燬,會有一定的流程在其中控制,以前我們接觸過IONIC, 不得不說這個框架對生命週期的定義是非常完美的,也為開發者提供了很多的便利。 那麼,對於React而言,是基於Component的一

ECMAScript 6 學習系列課程 ES6 常用內建方法的使用

在編寫Javascript的過程,我們經常會用到陣列過濾,字串等相關操作,比如會用到filter等方法,在ES6中同樣新增了很多內建方法,下面我們來了解一下。 Finding [ 1, 3, 4, 2 ].find(x => x > 3)

ECMAScript 6 學習系列課程 ES6 箭頭函式的使用

在ES6語法中,簡化了對函式的書寫,其實,最初並不適應這樣的寫法,感覺很奇怪,但是永久了,發現這種方式更加直觀,如果有了解swift語法的一定對箭頭函式不陌生。 下面我們來看一下這個箭頭函式在ES6中是如何應用的: odds = evens.map(v

ECMAScript 6 學習系列課程 ES6 Set和Map資料結構

學過Java的同學,一定用過List和Map的資料結構,不過JavaScript在最新版本中,也提供了Set和Map的資料結構,的確是廣大開發者的福音。 ES6提供了新的資料結構Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。 Set

hive 學習系列資料型別的定義

數字型別(Numeric Types) 整型 TINYINT(取值範圍:-128 – 127) SMALLINT(取值範圍:-32,768 to 32,767) INT/INTEGER(取值範圍: -2,147,483,648 to 2,147,48

React-Native 學習系列課程筆記React-Native開發環境搭建

對於2016年最火爆的前端H5框架無疑是Facebook推出的React, React框架可以說是一個系列框架,可以分為web端,服務端,移動端,其核心思想都是自己元件化開發,這也是未來前端或者是移動領域一個不小的趨勢所在。 那麼今天我們就來嘗試一下React

吳恩達深度學習系列課程筆記:卷積神經網路

本系列文章將對吳恩達在網易公開課“深度學習工程師”微專業內容進行筆記總結,這一部分介紹的是“卷積神經網路”部分。 1、計算機視覺 計算機視覺在我們還是生活中有非常廣泛的應用,以下幾個是最常見的例子: 影象分類: 可以對影象中的物體種類進行判斷,如確定影象中

NodeJS學習系列課程筆記NodeJs Stream 的相關使用方法

流的操作,在很多語言中存在,比如Java中的Inputsteam , outputStream 等等,在nodejs中, Stream也 是一個抽象介面,Node 中有很多物件實現了這個介面。例如,對http 伺服器發起請求的request 物件就是一個 S

NodeJS學習系列課程筆記NodeJs zlib庫檔案解壓縮的相關使用方法

檔案的壓縮和解壓,是一個很常見的功能,最近做專案用到這個功能點,於是拿出來分享一下。 簡單起見,我們看一下程式碼操作: 檔案壓縮 /** * Created by Richard on 7/14/16. */ const fs = require(

ES6-----學習系列set-map數據結構

trie for strong 沒有 類型轉化 數組去重 foreach 生效 nbsp 一、set數據結構 (使用 new來創建一個set集合 通過add方法添加元素 通過size來獲取set集合的長度)  { let list = new Set();

Java程序猿的JavaScript學習筆記9—— jQuery工具方法

article 順序 還要 並且 defined this ont property plain 計劃按例如以下順序完畢這篇筆記: Java程序猿的JavaScript學習筆記(1——理念) Java程序猿的JavaScript學習筆記(2——屬性

唐宇迪-機器學習/深度學習 系列課程福利大發送!不單優惠 還送機器學習必備實戰書籍!

機器學習 深度學習 人工智能 決勝AI就在今天 Hi同學們,給大家推薦一本機器學習的入門佳品:機器學習實戰。這本書可以說是我看過最通俗易懂的機器學習書籍了,並沒有上來直接闡述一些看著就頭疼的各種數學公式,而是以實際案例為出發點一步步帶領大家完成各個算法的建模與練習,人工智能必備No.1! 福利

劉國柱- Unity遊戲開發深度學習 系列課程福利大放送

Unity課程送書 Unity套餐課程 Unity遊戲深度學習 Unity最新書籍贈送 Unity專題課程 劉國柱--Unity遊戲開發深度學習 系列課程福利大發送!不單優惠, 還送Unity最新版本必備實戰書籍! HI, 各位熱心的Unity愛好者與學員,《Unity3D/2D 遊戲開

hive 學習系列hive 和elasticsearch 的交互,很詳細哦,我又來吹liubi了

圖片 upload ima com 5.6 cat rds href ping hive 操作elasticsearch 一,從hive 表格向elasticsearch 導入數據 1,首先,創建elasticsearch 索引,索引如下 curl -XPUT ‘10.81

react除錯工具react -devtools的安裝

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

Linux學習-1031rsync同步工具

     10.28 rsync工具介紹 10.29/10.30 rsync常用選項 10.31 rsync通過ssh同步 一、 rsync工具介紹     rsync是一個同步工具,在日常的運維中常會用到。它可以本地同步,也