Git Product home page Git Product logo

debugger-examples's Introduction

Debugger Examples

Examples

Examples

pythagorean example of scopes
Evals different evals
Debugger Statements
Booleans example with booleans
Breakpoints
exceptions different caught / uncaught exceptions
iframe pausing in an iframe
500 sources A page with 500 bogus sources
large-files
long-lines
localStorage Keys
Optimized Away Variable
typescript - perfetto perfetto tracing
typescript - greeter
clojurescript - hello
coffeescript - tutorial
Create React App - (jsx, flow)
JS in HTML A webpage with several inline scripts
asm.js
wasm
errors.js A simple html file with one error
events.js A page with some event handlers
scopes Examples of different scopes + vars
marko Marko site
redux todomvc Redux TodoMVC
angular - todos Angular todos

Source Maps

increment a simple source map example
source mapped js.min files simple webpack example
mangled names a simple source map with mangled identifiers
dual use a simple example when same module used in two bundles
30k files an example with 30,000 files in the source tree
multiple tabs an example where both original and generated sources have the same URLs

Libraries

React Reporter
Immutable List + Map
Babel Babel Transforms
Babel Tests Babel Test Transforms
Typescript & Webpack Small sample page of bundled TS
Angular Sample The sample app generated by Angular CLI
Angular Realworld Angular - angular2.realworld

Inline Scripts

simple an example w/ an inline script that can be injected
react an example w/ an inline script w/ a source map that can be injected
react2 an example w/ an inline script that has a source map

Local Test Pages

asm
debugger-statements
exceptions
frames
iframes
minified
return-values special scope variables
script-switching
scripts
sources
sourcemap-bogus
sourcemaps
sourcemaps2

Web Workers

Hello A simple worker hat starts up at the beginning
High primes The highest prime number
Inline Inline worker
Shared Shared workers
Shared tweets Shared Workers Tweets
Big data Big Data (using transferable objects) In Web Worker
Pi The Run After Pi

Thanks to greenido for the cool web worker examples

Getting started

git clone [email protected]:devtools-html/debugger-examples.git
cd debugger-examples
yarn install
yarn start

License

CC0-1.0.

debugger-examples's People

Contributors

abhishekg785 avatar arthur801031 avatar bomsy avatar captainbrosset avatar clarkbw avatar gregtatum avatar iguannalin avatar irfanhudda avatar jainsneha23 avatar jasonlaster avatar jbhoosreddy avatar juliandescottes avatar loganfsmyth avatar peterschussheim avatar thomascrevoisier avatar yurydelendik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

debugger-examples's Issues

broken formatting in the README file

tables in the README file are broken in the following

Examples

||| |---|---| | pythagorean| example of scopes| | Evals| different evals | | Debugger Statements|| | exceptions| different caught / uncaught exceptions| | large objects| large arrays / objects | | objects| objects | | promises|| | iframe|pausing in an iframe| | large-files|| | localStorage Keys|| | Optimized Away Variable|| | typescript - greeter|| | coffeescript - tutorial|| | Create React App - (jsx, flow)|| | asm.js||

Source Maps

||| |---|---| | increment| a simple source map example| | source mapped js.min files| simple webpack example|

Local Test Pages

||| |---|---| |asm|| |debugger-statements|| |exceptions|| |frames|| |iframes|| |minified|| |return-values|special scope variables | |script-switching|| |scripts|| |sources|| |sourcemap-bogus|| |sourcemaps|| |sourcemaps2||

Docs

Update getting started docs to include something about helping add more examples

Remove λ Svg in Outline view

In the Outline view we use a SVG to show a "lamba" letter before functions.
Turns out there is a unicode sign for lambda: λ

This does not look too bad I think (even better I'd say) :

Current vs Proposal

Also, we know SVG can be perf sensitive, so having a plain text here is probably better.

WIP:

diff --git a/src/components/PrimaryPanes/Outline.css b/src/components/PrimaryPanes/Outline.css
index 382c214b..e4397f3c 100644
--- a/src/components/PrimaryPanes/Outline.css
+++ b/src/components/PrimaryPanes/Outline.css
@@ -43,6 +43,10 @@
   white-space: nowrap;
 }

+.outline-list__class .outline-list__element {
+  padding-inline-start: 2rem;
+}
+
 .outline-list__element:hover {
   background: var(--theme-toolbar-background-hover);
 }
diff --git a/src/components/PrimaryPanes/Outline.js b/src/components/PrimaryPanes/Outline.js
index 8d1fe746..9c6c6dc0 100644
--- a/src/components/PrimaryPanes/Outline.js
+++ b/src/components/PrimaryPanes/Outline.js
@@ -9,7 +9,6 @@ import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import actions from "../../actions";
 import { getSelectedSource, getSymbols } from "../../selectors";
-import Svg from "../shared/Svg";

 import "./Outline.css";
 import PreviewFunction from "../shared/PreviewFunction";
@@ -55,13 +54,12 @@ export class Outline extends Component<Props> {
         className="outline-list__element"
         onClick={() => this.selectItem(location)}
       >
-        <Svg name="function" />
-        <PreviewFunction func={{ name, parameterNames }} />
+        λ <PreviewFunction func={{ name, parameterNames }} />
       </li>
     );
   }

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

  1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
  2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].

(Message COC001)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.