Now that Dev Edition is 57, download links should point there instead of nightly.

https://mozilladevelopers.github.io/playground/debugger/

Before diving in, let’s take a look at the Debugger interface. Hit option + command + S on Mac or shift + ctrl + S on Windows to open the Debugger.

Hi !

I discover the website soon and after the first reading on the homepage, I was confusing because "Grid tracks" and "Grid column" use the same image.

I little enhancement will be to change the "Grid column" image by selecting the first column for example and not the one at the middle.

This is the base64 code of the image updated:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkzcHgiIGhlaWdodD0iMTQ3cHgiIHZpZXdCb3g9IjAgMCAxOTMgMTQ3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JpZCBDb2x1bW48L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTMuMDAwMDAwLCAtMTQ4NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTMuMDAwMDAwLCAxMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMzU5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSIyIiB3aWR0aD0iNTYiIGhlaWdodD0iNTMuNzcwNTcyNiIgcng9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiMzMDZGRkQiIHN0cm9rZS13aWR0aD0iNCIgeD0iNjkiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIxMzUiIHk9IjIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzMwNkZGRCIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyIiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjUzLjc3MDU3MjYiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjY5IiB5PSI2NyIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU0IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMyIgZmlsbD0iI0ZGOTQwMCIgb3BhY2l0eT0iMC42IiB4PSIwIiB5PSIwIiB3aWR0aD0iNjAiIGhlaWdodD0iMTIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjMzA2RkZEIiBzdHJva2Utd2lkdGg9IjQiIHg9IjEzNSIgeT0iNjciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1My43NzA1NzI2IiByeD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K

Thanks

"It will be the element that has thedisplay: grid or display: inline-grid property on it."

space between 'the' and display: grid

To add a fourth column that is 70px wide, write:

grid-template-columns: 150px 150px 70px;

Should be

grid-template-columns: 150px 150px 150px 70px;

The link in https://twitter.com/firefox/status/912475974687707136 leads to https://mozilladevelopers.github.io/playground/&utm_source=twitter&utm_medium=social&utm_campaign=DevelopersQ3&utm_content=A144_A252_C003300 which is a 404. I assume there were other query-string parameters to be prepended to the URL.

I would suggest deleting the Tweet campaign for this one, and make a new one with the URL containing ?utm_source=twitter instead of &utm_source.

You can find the new logo here: https://github.com/mozilla/protocol-assets/blob/master/logos/firefox/browser/developer/logo-2xl-high-res.png

Can include campaign tracking, and makes it easier to update the link if necessary.

The first two labels in this image read source list pane.
I think they need to be updated to read toolbar and watch expressions, respectively

the image

For clarity, don't use self-closing divs:

The MIT License file (LICENSE) hasn't been modified since Gatsby was installed so it's saying this project "belongs" to them.

Using Firefox Developer Edition on Ubuntu 16.04
Pages: /playground/*
Issue: If someone clicks inside the content div and then tries to scroll using keyboard, one cannot scroll as the .content has overflow-y: scroll. (See screenshot)

Quick fix: src/styles/layout/_layout.scss : .content { overflow-y: hidden; }

Also, the blank scrollbar doesn't look good either and is redundant.

Other than that, this works fine in Chrome but Firefox doesn't let scroll in parent container after focusing on scrolling child container with no more scroll space (Issue?)

https://mozilladevelopers.github.io/playground/debugger/03-the-call-stack/

Issues with Debugger Documentation

I have found some issues with the "Introduction to Debugger" documentation. I will list the issues below.

Page 1: Introduction

1. The command given to open the debugger on windows is "shift + ctrl + s". This command should instead be "shift + ctrl + i".

   • Please see section A within the screenshot labeled "wrong_debugger_labels.png".
   • 

2. The picture labeled "All of the tools available in the tools pane" is mislabeled. The top two panes should be listed as the toolbar and watch expressions.

   • Please see the attached picture labeled "wrong_debugger_labels.png".
   • 

Page 2: Find the Value of a Variable

1. There is no source code provided to the user. They are unable to edit the associated JavaScript file (see error #2 below).
2. When trying to edit the JavaScript within the debugger, the user is unable to modify the JavaScript within the debugger. The documentation states:

If we use one of the three methods to look at the value of title, we can spot our issue. The value isn’t a string like we’d expect, but rather it is an entire object! If we hover over title and scroll through its different properties, we’ll find that we should have referenced the ‘value’ property of the object instead of the entire object itself. Fix line 14 and the app will work properly.

The documentation does not tell us how to fix the line, or provide the source files so that we can fix the function locally and test it out using Brackets or some other IDE.

Page 3: The Call Stack

1. Once again, the page mentions fixing a line within the removeSingle function. Please see below for the quote:

If we hover over index (or number), we see that it is undefined. If we hover over dataset we’ll see that there is no number property. There is only index. A typo! The line should say:

Page 4: Conditional Breakpoints

Nothing wrong was found on this page.

Page 5: Learn More

Nothing wrong was found on this page.

Thank you!

Hi. I see a few issues and pull requests from good people. But no one review them. I can help with it!

@slightlyoffbeat maybe you know someone who can grant me access to review and merge pull requests?

A week ago I translated articles about debugger to Russian for our community. And I rechecked all information. It's almost still correct. So it's possible to fix these 8 issues quickly.