<commit_before># Table of Contents
1. [Architecture](#architecture)
2. [Components](#components)
3. [Component Data](#component-data)
4. [Reducers](#reducers)
5. [Actions](#actions)



debugger.html
=============

Debugger.html is an open source project that is built on top of React and Redux that functions as a standalone debugger for Firefox, Chrome and Node. This project is being created to provide a debugger that is stand-alone and does not require a specific browser tool to do debugging.

This document gives a detailed view of the components, actions and reducers that make up the debugger.html project. Prior knowledge of React and Redux  is suggested.

React documentation can be found [here](https://facebook.github.io/react/docs/getting-started.html).
Redux documentation can be found [here](http://redux.js.org/).

As with most documentation related to code, this document may be out of date. The last edit date occurred on August 30, 2016. If you find issues in the documentation please file an issue as described in the [contributing](https://github.com/devtools-html/debugger.html/blob/master/.github/CONTRIBUTING.md#writing-documentation-book) guide.

# Architecture


Debugger.html is a React-Redux based application — the UI is constructed using React Components. the follow illustration provides a simplistic high level view:

![](https://docs.google.com/drawings/d/1JTDI-62CG29M37rpTGIDh70rOTuCmJf1VqxCKPe9zxM/pub?w=960&h=720)
[Click here to Edit](https://docs.google.com/drawings/d/1JTDI-62CG29M37rpTGIDh70rOTuCmJf1VqxCKPe9zxM/edit?usp=sharing)

Application-critical objects are stored in one
global state object (housed in a Redux store) that some components have
access to. Many components are not aware of this state but are passed in
values to render using React properties.

In the Debugger.html project we
also often use React’s setState to manage component local state. For
example, storing the state of a tree in the sources view or using it in
the App component to remember if the file search box is being displayed
(cmd-&gt;p).

When a user
manipulates the UI, Redux Actions are fired to collect payload
data, which affects the state of the application for the given
operation. Actions set a specific type of operation for the store and
dispatch the event.

Reducers handle all actions and decide the new
application state based on the action type. You can think of a reducer
as a set of functions that take a specific action type and the current
state of the app as parameters and returns the new state of the
application.

The Store is a JavaScript object that contains and manages
the state of the application. After the Reducers create a new version
of the state, the store will fire a re-rendering of all the
components. Note that a new state is created every time — the old state
is not modified.

React uses a Virtual DOM; only required changes to the
actual DOM will be rendered.

# Components


debbuger.html uses React [Components](https://github.com/devtools-html/debugger.html/tree/master/src/components) to render portions of the
application. Each component’s source code is located under the
src/components folder. In this section we will cover how the
presentation pieces fit together; later we will discuss
how debugger.html uses Redux to wire up data to each of the components.

The top-level component is the App component; it encapsulates all
other components. Presented below is an overview of the component
architectural relationships:
<commit_msg>Fix typo in debugger-html-react-redux-overview.md (#7408)<commit_after># Table of Contents
1. [Architecture](#architecture)
2. [Components](#components)
3. [Component Data](#component-data)
4. [Reducers](#reducers)
5. [Actions](#actions)



debugger.html
=============

Debugger.html is an open source project that is built on top of React and Redux that functions as a standalone debugger for Firefox, Chrome and Node. This project is being created to provide a debugger that is stand-alone and does not require a specific browser tool to do debugging.

This document gives a detailed view of the components, actions and reducers that make up the debugger.html project. Prior knowledge of React and Redux  is suggested.

React documentation can be found [here](https://facebook.github.io/react/docs/getting-started.html).
Redux documentation can be found [here](http://redux.js.org/).

As with most documentation related to code, this document may be out of date. The last edit date occurred on August 30, 2016. If you find issues in the documentation please file an issue as described in the [contributing](https://github.com/devtools-html/debugger.html/blob/master/.github/CONTRIBUTING.md#writing-documentation-book) guide.

# Architecture


Debugger.html is a React-Redux based application — the UI is constructed using React Components. the follow illustration provides a simplistic high level view:

![](https://docs.google.com/drawings/d/1JTDI-62CG29M37rpTGIDh70rOTuCmJf1VqxCKPe9zxM/pub?w=960&h=720)
[Click here to Edit](https://docs.google.com/drawings/d/1JTDI-62CG29M37rpTGIDh70rOTuCmJf1VqxCKPe9zxM/edit?usp=sharing)

Application-critical objects are stored in one
global state object (housed in a Redux store) that some components have
access to. Many components are not aware of this state but are passed in
values to render using React properties.

In the Debugger.html project we
also often use React’s setState to manage component local state. For
example, storing the state of a tree in the sources view or using it in
the App component to remember if the file search box is being displayed
(cmd-&gt;p).

When a user
manipulates the UI, Redux Actions are fired to collect payload
data, which affects the state of the application for the given
operation. Actions set a specific type of operation for the store and
dispatch the event.

Reducers handle all actions and decide the new
application state based on the action type. You can think of a reducer
as a set of functions that take a specific action type and the current
state of the app as parameters and returns the new state of the
application.

The Store is a JavaScript object that contains and manages
the state of the application. After the Reducers create a new version
of the state, the store will fire a re-rendering of all the
components. Note that a new state is created every time — the old state
is not modified.

React uses a Virtual DOM; only required changes to the
actual DOM will be rendered.

# Components


debugger.html uses React [Components](https://github.com/devtools-html/debugger.html/tree/master/src/components) to render portions of the
application. Each component’s source code is located under the
src/components folder. In this section we will cover how the
presentation pieces fit together; later we will discuss
how debugger.html uses Redux to wire up data to each of the components.

The top-level component is the App component; it encapsulates all
other components. Presented below is an overview of the component
architectural relationships:

{'fraction_non_alphanumeric': 0.060408394781622236, 'fraction_numerical': 0.011627906976744186, 'mean_word_length': 4.734146341463415, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4217715', 'n_tokens_mistral': 1951, 'n_tokens_neox': 1843, 'n_words': 966}