CINXE.COM

<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="preload" href="/playground/component---src-layouts-index-js-745ea9f5fcaee4546906.js" as="script"/><link rel="preload" href="/playground/component---src-pages-debugger-index-js-2597034f63dbd6422306.js" as="script"/><link rel="preload" href="/playground/path---debugger-a0e39f21c11f6a62c5ab.js" as="script"/><link rel="preload" href="/playground/app-8f1ccff5c7a42d45471a.js" as="script"/><link rel="preload" href="/playground/commons-801253a49cbae9e30f44.js" as="script"/><title data-react-helmet="true">Debugger PlayGround | Introduction | Mozilla</title><link data-react-helmet="true" rel="shortcut icon" type="image/x-icon" href="/playground/static/favicon.d4f1f46b.ico"/><link data-react-helmet="true" rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAAAAADlzdG3AAADZ0lEQVR4Ae3aIcyjShTF8SvGm/FqvBov8MEj0XgcComsxuNwuBosqgKFr0RUICrIfdu8NF/p6wwzdGE3L+fnb+jJv7tbkiUAAAAAAAAAAAAAAAAAAAAAAAAAgP8LIR/Exjv641QYF6eqfqhORRwq57sk//euKYssDn/PFKHDdYoWgqzqrhP/uF/bKtO0Rj/u7vxjGtoy0fQ1WV/XJa8HcT3M/F/z0CSSzGTcfLyb+jqS347oeF328lHaG5tMXSpNwZOL+W48fzlDtrwufX6U4DyxzXSJBS253Z0D8c2Is/sImd14zVQqeifzcf0ul4eUUBW76EJaUjW7aPQBJXTLbq7Lr1TgeteF+5YwbDAYk5cV4ZVdDeHOJVTH7saInvTA7ga9awnZMG/5NKplH63asYQ4sZ9W0oMs2c9J7lYiiW/sqRD0S3pnP1O0W4myZ1+3gIiCgX1d1F4lxpm91YJEyf7SvUpsMYYUjuyvVzuV2KSUFW+R/EUluM9G3qKVB5SYx6Hvrw4/Bd823Mf+193Ea+Zg7xHXukiiQOswSk8duxvKPA4fd3Fa9Ssjcv8Rxfmp6XjFkAcvrXV8ZjddGgh6kjod2KYV/ivUk4zYaq40LanizuvGTNGSrthiVPQFzTZTJumdyNdX9JGgd7K0PSikLwT2DZ8qi3xmuyH42N/S4p7uNqIQ9Ils2OoWGaoPbFTuM8Lyt3c4stf2p8ScsN5pxC0kA1HPbNYpMrC8ZfVinxGNIJPotuk3hCiOHmH7V1T2bNRrMgrHg0d0ksxq+58IE9UePCIXZGB9fZtiMhPlwSNCok3fC00W2bEjboos1JUNGkkW8f3QEb11hBjYoBTWgtdDR1TSOqJng9z+uOHQEaUgm4o/mxOy0d2hI1LaNGKK/d+MMQIjNo5o/9wIlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlEAJlCBf8kfIBrl8I9xGJKYLe4nB8CQjUTRPdccGfbOUS6cR86VunhLhXmJqfkROITr21xpGWJTCUsIi3+2/lDb+I06WEhZz9rePOG8bgRIogRIogRIogRIogRIo0bG/83JEvfF9ov1t7xPlxVt/Wo4oHE7SDyPKfv0wJgdCaX9K0CvlcrLx0ZLgbwEAAAAAAAAAAAAAAAAAAAAAAAAA/wDu9ByccrvLSQAAAABJRU5ErkJggg==" sizes="196x196"/><meta data-react-helmet="true" name="description" content="Learn how to use the Firefox Debugger to find and fix bugs."/><meta data-react-helmet="true" property="og:url" content="https://mozilladevelopers.github.io/playground/debugger"/><meta data-react-helmet="true" property="og:title" content="Go beyond console.log!"/><meta data-react-helmet="true" property="og:description" content="Still using console.log for debugging JavaScript? There is a better way! Learn how to use Firefox Debugger to debug and fix your code."/><meta data-react-helmet="true" property="og:image" content="/playground/static/fb.b7e08052.png"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:site" content="@firefox"/><meta data-react-helmet="true" name="twitter:creator" content="@firefox"/><meta data-react-helmet="true" name="twitter:title" content="Go beyond console.log"/><meta data-react-helmet="true" name="twitter:description" content="Still using console.log for debugging JavaScript? There is a better way! Learn how to use Firefox Debugger to debug and fix your code."/><meta data-react-helmet="true" name="twitter:image" content="https://i.imgur.com/HQemmAf.png"/><style id="gatsby-inlined-css">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);@font-face{font-family:Antonio;src:local("Antonio Light"),local("Antonio-Light"),url(/playground/static/antonio-light.4b30712e.woff2) format("woff2"),url(/playground/static/antonio-light.6dea71fb.woff) format("woff"),url(/playground/static/antonio-light.ce004658.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Antonio;src:local("Antonio Bold"),local("Antonio-Bold"),url(/playground/static/antonio-bold.cee7b01b.woff2) format("woff2"),url(/playground/static/antonio-bold.eb8e8cd4.woff) format("woff"),url(/playground/static/antonio-bold.07cba0f6.ttf) format("truetype");font-weight:700;font-style:normal}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.my0{margin-top:0;margin-bottom:0}.mx0{margin-left:0;margin-right:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.mx1{margin-left:.5rem;margin-right:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.mx2{margin-left:1rem;margin-right:1rem}.m3{margin:1.5rem}.mt3{margin-top:1.5rem}.mr3{margin-right:1.5rem}.mb3{margin-bottom:1.5rem}.ml3{margin-left:1.5rem}.my3{margin-top:1.5rem;margin-bottom:1.5rem}.mx3{margin-left:1.5rem;margin-right:1.5rem}.m4{margin:2rem}.mt4{margin-top:2rem}.mr4{margin-right:2rem}.mb4{margin-bottom:2rem}.ml4{margin-left:2rem}.my4{margin-top:2rem;margin-bottom:2rem}.mx4{margin-left:2rem;margin-right:2rem}.m5{margin:2.5rem}.mt5{margin-top:2.5rem}.mr5{margin-right:2.5rem}.mb5{margin-bottom:2.5rem}.ml5{margin-left:2.5rem}.my5{margin-top:2.5rem;margin-bottom:2.5rem}.mx5{margin-left:2.5rem;margin-right:2.5rem}.m6{margin:3rem}.mt6{margin-top:3rem}.mr6{margin-right:3rem}.mb6{margin-bottom:3rem}.ml6{margin-left:3rem}.my6{margin-top:3rem;margin-bottom:3rem}.mx6{margin-left:3rem;margin-right:3rem}.m7{margin:3.5rem}.mt7{margin-top:3.5rem}.mr7{margin-right:3.5rem}.mb7{margin-bottom:3.5rem}.ml7{margin-left:3.5rem}.my7{margin-top:3.5rem;margin-bottom:3.5rem}.mx7{margin-left:3.5rem;margin-right:3.5rem}.m8{margin:4rem}.mt8{margin-top:4rem}.mr8{margin-right:4rem}.mb8{margin-bottom:4rem}.ml8{margin-left:4rem}.my8{margin-top:4rem;margin-bottom:4rem}.mx8{margin-left:4rem;margin-right:4rem}.m9{margin:4.5rem}.mt9{margin-top:4.5rem}.mr9{margin-right:4.5rem}.mb9{margin-bottom:4.5rem}.ml9{margin-left:4.5rem}.my9{margin-top:4.5rem;margin-bottom:4.5rem}.mx9{margin-left:4.5rem;margin-right:4.5rem}.m10{margin:5rem}.mt10{margin-top:5rem}.mr10{margin-right:5rem}.mb10{margin-bottom:5rem}.ml10{margin-left:5rem}.my10{margin-top:5rem;margin-bottom:5rem}.mx10{margin-left:5rem;margin-right:5rem}.m11{margin:5.5rem}.mt11{margin-top:5.5rem}.mr11{margin-right:5.5rem}.mb11{margin-bottom:5.5rem}.ml11{margin-left:5.5rem}.my11{margin-top:5.5rem;margin-bottom:5.5rem}.mx11{margin-left:5.5rem;margin-right:5.5rem}.m12{margin:6rem}.mt12{margin-top:6rem}.mr12{margin-right:6rem}.mb12{margin-bottom:6rem}.ml12{margin-left:6rem}.my12{margin-top:6rem;margin-bottom:6rem}.mx12{margin-left:6rem;margin-right:6rem}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.py0{padding-top:0;padding-bottom:0}.px0{padding-left:0;padding-right:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:1.5rem}.pt3{padding-top:1.5rem}.pr3{padding-right:1.5rem}.pb3{padding-bottom:1.5rem}.pl3{padding-left:1.5rem}.py3{padding-top:1.5rem;padding-bottom:1.5rem}.px3{padding-left:1.5rem;padding-right:1.5rem}.p4{padding:2rem}.pt4{padding-top:2rem}.pr4{padding-right:2rem}.pb4{padding-bottom:2rem}.pl4{padding-left:2rem}.py4{padding-top:2rem;padding-bottom:2rem}.px4{padding-left:2rem;padding-right:2rem}.p5{padding:2.5rem}.pt5{padding-top:2.5rem}.pr5{padding-right:2.5rem}.pb5{padding-bottom:2.5rem}.pl5{padding-left:2.5rem}.py5{padding-top:2.5rem;padding-bottom:2.5rem}.px5{padding-left:2.5rem;padding-right:2.5rem}.p6{padding:3rem}.pt6{padding-top:3rem}.pr6{padding-right:3rem}.pb6{padding-bottom:3rem}.pl6{padding-left:3rem}.py6{padding-top:3rem;padding-bottom:3rem}.px6{padding-left:3rem;padding-right:3rem}.p7{padding:3.5rem}.pt7{padding-top:3.5rem}.pr7{padding-right:3.5rem}.pb7{padding-bottom:3.5rem}.pl7{padding-left:3.5rem}.py7{padding-top:3.5rem;padding-bottom:3.5rem}.px7{padding-left:3.5rem;padding-right:3.5rem}.p8{padding:4rem}.pt8{padding-top:4rem}.pr8{padding-right:4rem}.pb8{padding-bottom:4rem}.pl8{padding-left:4rem}.py8{padding-top:4rem;padding-bottom:4rem}.px8{padding-left:4rem;padding-right:4rem}.p9{padding:4.5rem}.pt9{padding-top:4.5rem}.pr9{padding-right:4.5rem}.pb9{padding-bottom:4.5rem}.pl9{padding-left:4.5rem}.py9{padding-top:4.5rem;padding-bottom:4.5rem}.px9{padding-left:4.5rem;padding-right:4.5rem}.p10{padding:5rem}.pt10{padding-top:5rem}.pr10{padding-right:5rem}.pb10{padding-bottom:5rem}.pl10{padding-left:5rem}.py10{padding-top:5rem;padding-bottom:5rem}.px10{padding-left:5rem;padding-right:5rem}.p11{padding:5.5rem}.pt11{padding-top:5.5rem}.pr11{padding-right:5.5rem}.pb11{padding-bottom:5.5rem}.pl11{padding-left:5.5rem}.py11{padding-top:5.5rem;padding-bottom:5.5rem}.px11{padding-left:5.5rem;padding-right:5.5rem}.p12{padding:6rem}.pt12{padding-top:6rem}.pr12{padding-right:6rem}.pb12{padding-bottom:6rem}.pl12{padding-left:6rem}.py12{padding-top:6rem;padding-bottom:6rem}.px12{padding-left:6rem;padding-right:6rem}.clearfix:after{clear:both;content:"";display:table}.center{margin-left:auto;margin-right:auto}.pull-right{float:right}.pull-left{float:left}.text-center{text-align:center}.hidden{display:none;visibility:hidden}@media (max-width:59.3125em){.hidden-mobile{display:none;visibility:hidden}}@media (min-width:59.375em){.hidden-desktop{display:none;visibility:hidden}}*{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-weight:400;margin:0;outline:0;padding:0;text-decoration:none;text-rendering:optimizeLegibility;list-style:none}body,html{min-height:100vh;min-width:100%}a{color:currentColor}textarea{resize:none}input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}html{color:#000;line-height:1.5;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin-bottom:1rem}p.lead{font-size:21.328px;font-size:1.333rem;font-weight:300}em,i{font-style:italic;line-height:inherit}b,strong{font-weight:600}.small,small{font-size:12.003px;font-size:.75019rem}.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:600;line-height:1.5}.h1,h1{font-size:37.89749px;font-size:2.36859rem;line-height:3rem}.h1,.h2,h1,h2{font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:300;text-transform:uppercase;margin-bottom:1rem}.h2,h2{font-size:28.43022px;font-size:1.77689rem;line-height:2rem;border-bottom:1px solid #eee;padding-bottom:2.5rem;margin-bottom:2.5rem}.h3,h3{font-size:21.328px;font-size:1.333rem;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";font-weight:700;text-transform:uppercase;margin-bottom:.5rem}.h3,.h4,h3,h4{line-height:1.5rem}.h4,h4{font-size:16px;font-size:1rem;margin-bottom:1rem}.h5,h5{font-size:12.003px;font-size:.75019rem;margin-bottom:.5rem;line-height:1.5rem}a{color:#306ffd;cursor:pointer;text-decoration:none;-webkit-transition:color .3s ease;transition:color .3s ease}a:focus,a:hover{color:#0069f2}a img,hr{border:0}hr{height:1px;background-color:#ccc;margin:1rem 0}dl,ol,ul{list-style-position:inside;line-height:inherit;margin-bottom:1rem}ol,ul{margin-left:1.25rem}ol,ul,ul.list li{list-style-type:disc}ul.list li{margin-left:1rem}ol.list{margin-left:2rem}ol.list li{list-style-type:number;margin-bottom:.5rem}p code{background-color:#f3f3f3;padding:0 2px}blockquote{font-size:21.328px;font-size:1.333rem;line-height:1.5;margin:0 0 .5rem;padding:.5rem 1rem;font-weight:300;border-left:5px solid #f2f2f2}dt{float:left;clear:left;width:100px;text-align:right;font-weight:700}dt:after{content:":"}dd{margin:0 0 0 110px;padding:0 0 .5rem}.shortcut{background:#fff;border-radius:5px;border:1px solid #d6dadc;border-bottom-color:#cdd2d4;-webkit-box-shadow:0 2px 3px rgba(0,0,0,.1);box-shadow:0 2px 3px rgba(0,0,0,.1);color:#4d4d4d;cursor:default;display:inline-block;font-size:14px;padding:0 8px;font-weight:700}.row:after{clear:both;content:"";display:table}.break{clear:both}.container{max-width:100%;height:100%;margin:0 auto;padding:0 .5rem}.container:after{clear:both;content:"";display:table}@media (min-width:46.875em){.container{width:750px}}@media (min-width:59.375em){.container{width:950px}}@media (min-width:75em){.container{width:1200px}}.col-xs-1{width:6.09756%;float:left;margin-right:2.43902%}.col-xs-1:last-child{margin-right:0}.col-xs-1--last{width:6.09756%;float:right}.col-xs-1--center{width:6.09756%;margin-left:auto;margin-right:auto}.col-xs-2{width:14.63415%;float:left;margin-right:2.43902%}.col-xs-2:last-child{margin-right:0}.col-xs-2--last{width:14.63415%;float:right}.col-xs-2--center{width:14.63415%;margin-left:auto;margin-right:auto}.col-xs-3{width:23.17073%;float:left;margin-right:2.43902%}.col-xs-3:last-child{margin-right:0}.col-xs-3--last{width:23.17073%;float:right}.col-xs-3--center{width:23.17073%;margin-left:auto;margin-right:auto}.col-xs-4{width:31.70732%;float:left;margin-right:2.43902%}.col-xs-4:last-child{margin-right:0}.col-xs-4--last{width:31.70732%;float:right}.col-xs-4--center{width:31.70732%;margin-left:auto;margin-right:auto}.col-xs-5{width:40.2439%;float:left;margin-right:2.43902%}.col-xs-5:last-child{margin-right:0}.col-xs-5--last{width:40.2439%;float:right}.col-xs-5--center{width:40.2439%;margin-left:auto;margin-right:auto}.col-xs-6{width:48.78049%;float:left;margin-right:2.43902%}.col-xs-6:last-child{margin-right:0}.col-xs-6--last{width:48.78049%;float:right}.col-xs-6--center{width:48.78049%;margin-left:auto;margin-right:auto}.col-xs-7{width:57.31707%;float:left;margin-right:2.43902%}.col-xs-7:last-child{margin-right:0}.col-xs-7--last{width:57.31707%;float:right}.col-xs-7--center{width:57.31707%;margin-left:auto;margin-right:auto}.col-xs-8{width:65.85366%;float:left;margin-right:2.43902%}.col-xs-8:last-child{margin-right:0}.col-xs-8--last{width:65.85366%;float:right}.col-xs-8--center{width:65.85366%;margin-left:auto;margin-right:auto}.col-xs-9{width:74.39024%;float:left;margin-right:2.43902%}.col-xs-9:last-child{margin-right:0}.col-xs-9--last{width:74.39024%;float:right}.col-xs-9--center{width:74.39024%;margin-left:auto;margin-right:auto}.col-xs-10{width:82.92683%;float:left;margin-right:2.43902%}.col-xs-10:last-child{margin-right:0}.col-xs-10--last{width:82.92683%;float:right}.col-xs-10--center{width:82.92683%;margin-left:auto;margin-right:auto}.col-xs-11{width:91.46341%;float:left;margin-right:2.43902%}.col-xs-11:last-child{margin-right:0}.col-xs-11--last{width:91.46341%;float:right}.col-xs-11--center{width:91.46341%;margin-left:auto;margin-right:auto}.col-xs-12{width:100%;float:left;margin-right:2.43902%}.col-xs-12:last-child{margin-right:0}.col-xs-12--last{width:100%;float:right}.col-xs-12--center{width:100%;margin-left:auto;margin-right:auto}@media (min-width:46.875em){.col-sm-1{width:6.09756%;float:left;margin-right:2.43902%}.col-sm-1:last-child{margin-right:0}.col-sm-1--last{width:6.09756%;float:right}.col-sm-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-2{width:14.63415%;float:left;margin-right:2.43902%}.col-sm-2:last-child{margin-right:0}.col-sm-2--last{width:14.63415%;float:right}.col-sm-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-3{width:23.17073%;float:left;margin-right:2.43902%}.col-sm-3:last-child{margin-right:0}.col-sm-3--last{width:23.17073%;float:right}.col-sm-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-4{width:31.70732%;float:left;margin-right:2.43902%}.col-sm-4:last-child{margin-right:0}.col-sm-4--last{width:31.70732%;float:right}.col-sm-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-5{width:40.2439%;float:left;margin-right:2.43902%}.col-sm-5:last-child{margin-right:0}.col-sm-5--last{width:40.2439%;float:right}.col-sm-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-6{width:48.78049%;float:left;margin-right:2.43902%}.col-sm-6:last-child{margin-right:0}.col-sm-6--last{width:48.78049%;float:right}.col-sm-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-7{width:57.31707%;float:left;margin-right:2.43902%}.col-sm-7:last-child{margin-right:0}.col-sm-7--last{width:57.31707%;float:right}.col-sm-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-8{width:65.85366%;float:left;margin-right:2.43902%}.col-sm-8:last-child{margin-right:0}.col-sm-8--last{width:65.85366%;float:right}.col-sm-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-9{width:74.39024%;float:left;margin-right:2.43902%}.col-sm-9:last-child{margin-right:0}.col-sm-9--last{width:74.39024%;float:right}.col-sm-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-10{width:82.92683%;float:left;margin-right:2.43902%}.col-sm-10:last-child{margin-right:0}.col-sm-10--last{width:82.92683%;float:right}.col-sm-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-11{width:91.46341%;float:left;margin-right:2.43902%}.col-sm-11:last-child{margin-right:0}.col-sm-11--last{width:91.46341%;float:right}.col-sm-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:46.875em){.col-sm-12{width:100%;float:left;margin-right:2.43902%}.col-sm-12:last-child{margin-right:0}.col-sm-12--last{width:100%;float:right}.col-sm-12--center{width:100%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-1{width:6.09756%;float:left;margin-right:2.43902%}.col-md-1:last-child{margin-right:0}.col-md-1--last{width:6.09756%;float:right}.col-md-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-2{width:14.63415%;float:left;margin-right:2.43902%}.col-md-2:last-child{margin-right:0}.col-md-2--last{width:14.63415%;float:right}.col-md-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-3{width:23.17073%;float:left;margin-right:2.43902%}.col-md-3:last-child{margin-right:0}.col-md-3--last{width:23.17073%;float:right}.col-md-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-4{width:31.70732%;float:left;margin-right:2.43902%}.col-md-4:last-child{margin-right:0}.col-md-4--last{width:31.70732%;float:right}.col-md-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-5{width:40.2439%;float:left;margin-right:2.43902%}.col-md-5:last-child{margin-right:0}.col-md-5--last{width:40.2439%;float:right}.col-md-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-6{width:48.78049%;float:left;margin-right:2.43902%}.col-md-6:last-child{margin-right:0}.col-md-6--last{width:48.78049%;float:right}.col-md-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-7{width:57.31707%;float:left;margin-right:2.43902%}.col-md-7:last-child{margin-right:0}.col-md-7--last{width:57.31707%;float:right}.col-md-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-8{width:65.85366%;float:left;margin-right:2.43902%}.col-md-8:last-child{margin-right:0}.col-md-8--last{width:65.85366%;float:right}.col-md-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-9{width:74.39024%;float:left;margin-right:2.43902%}.col-md-9:last-child{margin-right:0}.col-md-9--last{width:74.39024%;float:right}.col-md-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-10{width:82.92683%;float:left;margin-right:2.43902%}.col-md-10:last-child{margin-right:0}.col-md-10--last{width:82.92683%;float:right}.col-md-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-11{width:91.46341%;float:left;margin-right:2.43902%}.col-md-11:last-child{margin-right:0}.col-md-11--last{width:91.46341%;float:right}.col-md-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:59.375em){.col-md-12{width:100%;float:left;margin-right:2.43902%}.col-md-12:last-child{margin-right:0}.col-md-12--last{width:100%;float:right}.col-md-12--center{width:100%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-1{width:6.09756%;float:left;margin-right:2.43902%}.col-lg-1:last-child{margin-right:0}.col-lg-1--last{width:6.09756%;float:right}.col-lg-1--center{width:6.09756%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-2{width:14.63415%;float:left;margin-right:2.43902%}.col-lg-2:last-child{margin-right:0}.col-lg-2--last{width:14.63415%;float:right}.col-lg-2--center{width:14.63415%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-3{width:23.17073%;float:left;margin-right:2.43902%}.col-lg-3:last-child{margin-right:0}.col-lg-3--last{width:23.17073%;float:right}.col-lg-3--center{width:23.17073%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-4{width:31.70732%;float:left;margin-right:2.43902%}.col-lg-4:last-child{margin-right:0}.col-lg-4--last{width:31.70732%;float:right}.col-lg-4--center{width:31.70732%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-5{width:40.2439%;float:left;margin-right:2.43902%}.col-lg-5:last-child{margin-right:0}.col-lg-5--last{width:40.2439%;float:right}.col-lg-5--center{width:40.2439%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-6{width:48.78049%;float:left;margin-right:2.43902%}.col-lg-6:last-child{margin-right:0}.col-lg-6--last{width:48.78049%;float:right}.col-lg-6--center{width:48.78049%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-7{width:57.31707%;float:left;margin-right:2.43902%}.col-lg-7:last-child{margin-right:0}.col-lg-7--last{width:57.31707%;float:right}.col-lg-7--center{width:57.31707%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-8{width:65.85366%;float:left;margin-right:2.43902%}.col-lg-8:last-child{margin-right:0}.col-lg-8--last{width:65.85366%;float:right}.col-lg-8--center{width:65.85366%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-9{width:74.39024%;float:left;margin-right:2.43902%}.col-lg-9:last-child{margin-right:0}.col-lg-9--last{width:74.39024%;float:right}.col-lg-9--center{width:74.39024%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-10{width:82.92683%;float:left;margin-right:2.43902%}.col-lg-10:last-child{margin-right:0}.col-lg-10--last{width:82.92683%;float:right}.col-lg-10--center{width:82.92683%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-11{width:91.46341%;float:left;margin-right:2.43902%}.col-lg-11:last-child{margin-right:0}.col-lg-11--last{width:91.46341%;float:right}.col-lg-11--center{width:91.46341%;margin-left:auto;margin-right:auto}}@media (min-width:75em){.col-lg-12{width:100%;float:left;margin-right:2.43902%}.col-lg-12:last-child{margin-right:0}.col-lg-12--last{width:100%;float:right}.col-lg-12--center{width:100%;margin-left:auto;margin-right:auto}}.col-xs-offset-1{margin-left:6.09756%}.col-xs-offset-2{margin-left:14.63415%}.col-xs-offset-3{margin-left:23.17073%}.col-xs-offset-4{margin-left:31.70732%}.col-xs-offset-5{margin-left:40.2439%}.col-xs-offset-6{margin-left:48.78049%}.col-xs-offset-7{margin-left:57.31707%}.col-xs-offset-8{margin-left:65.85366%}.col-xs-offset-9{margin-left:74.39024%}.col-xs-offset-10{margin-left:82.92683%}.col-xs-offset-11{margin-left:91.46341%}.col-xs-offset-12{margin-left:100%}@media (min-width:46.875em){.col-sm-offset-1{margin-left:8.53659%}}@media (min-width:46.875em){.col-sm-offset-2{margin-left:17.07317%}}@media (min-width:46.875em){.col-sm-offset-3{margin-left:25.60976%}}@media (min-width:46.875em){.col-sm-offset-4{margin-left:34.14634%}}@media (min-width:46.875em){.col-sm-offset-5{margin-left:42.68293%}}@media (min-width:46.875em){.col-sm-offset-6{margin-left:51.21951%}}@media (min-width:46.875em){.col-sm-offset-7{margin-left:59.7561%}}@media (min-width:46.875em){.col-sm-offset-8{margin-left:68.29268%}}@media (min-width:46.875em){.col-sm-offset-9{margin-left:76.82927%}}@media (min-width:46.875em){.col-sm-offset-10{margin-left:85.36585%}}@media (min-width:46.875em){.col-sm-offset-11{margin-left:93.90244%}}@media (min-width:46.875em){.col-sm-offset-12{margin-left:102.43902%}}@media (min-width:59.375em){.col-md-offset-1{margin-left:8.53659%}}@media (min-width:59.375em){.col-md-offset-2{margin-left:17.07317%}}@media (min-width:59.375em){.col-md-offset-3{margin-left:25.60976%}}@media (min-width:59.375em){.col-md-offset-4{margin-left:34.14634%}}@media (min-width:59.375em){.col-md-offset-5{margin-left:42.68293%}}@media (min-width:59.375em){.col-md-offset-6{margin-left:51.21951%}}@media (min-width:59.375em){.col-md-offset-7{margin-left:59.7561%}}@media (min-width:59.375em){.col-md-offset-8{margin-left:68.29268%}}@media (min-width:59.375em){.col-md-offset-9{margin-left:76.82927%}}@media (min-width:59.375em){.col-md-offset-10{margin-left:85.36585%}}@media (min-width:59.375em){.col-md-offset-11{margin-left:93.90244%}}@media (min-width:59.375em){.col-md-offset-12{margin-left:102.43902%}}@media (min-width:75em){.col-lg-offset-1{margin-left:8.53659%}}@media (min-width:75em){.col-lg-offset-2{margin-left:17.07317%}}@media (min-width:75em){.col-lg-offset-3{margin-left:25.60976%}}@media (min-width:75em){.col-lg-offset-4{margin-left:34.14634%}}@media (min-width:75em){.col-lg-offset-5{margin-left:42.68293%}}@media (min-width:75em){.col-lg-offset-6{margin-left:51.21951%}}@media (min-width:75em){.col-lg-offset-7{margin-left:59.7561%}}@media (min-width:75em){.col-lg-offset-8{margin-left:68.29268%}}@media (min-width:75em){.col-lg-offset-9{margin-left:76.82927%}}@media (min-width:75em){.col-lg-offset-10{margin-left:85.36585%}}@media (min-width:75em){.col-lg-offset-11{margin-left:93.90244%}}@media (min-width:75em){.col-lg-offset-12{margin-left:102.43902%}}body{background-color:#fff}img{max-width:100%;height:auto;display:inline-block;vertical-align:middle}:focus{outline:0}textarea{height:auto;min-height:50px}select,textarea{border-radius:2px}select{width:100%}.main{padding-top:3rem;min-height:calc(100vh - 380px)}.content{padding-bottom:3rem;overflow-y:scroll}.content img{margin-bottom:1.5rem}@media (min-width:59.375em){.content{width:65.85366%;float:left;margin-right:2.43902%;padding-left:1.5rem}.content:last-child{margin-right:0}}@media (min-width:75em){.content{width:74.39024%;float:left;margin-right:2.43902%;padding-left:4.5rem}.content:last-child{margin-right:0}}.header{background-color:#2d68ee;background-image:linear-gradient(60deg,#1259fe,#003098);padding:1.5rem 0}.header__logo{float:left;display:inline-block;height:35px}.header__cta{float:right;border:2px solid #fff;color:#fff;background-color:transparent;font-size:14px;font-weight:700;padding:0 .5rem;line-height:35px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.header__cta:hover{background-color:hsla(0,0%,100%,.2)}.header__cta-download{margin-right:.5rem}.side{width:31.70732%;float:left;margin-right:2.43902%;border-right:1px solid #ededed;padding-bottom:2rem;display:none}.side:last-child{margin-right:0}@media (min-width:59.375em){.side{display:block}}@media (min-width:75em){.side{width:23.17073%;float:left;margin-right:2.43902%}.side:last-child{margin-right:0}}.side-nav__circle{float:left;background-color:#eee;height:40px;width:40px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.is-active .side-nav__circle{background-color:#ffc73d;background-image:linear-gradient(45deg,#ffc73d,#ff722a 99%)}.is-done .side-nav__circle{background-color:#c0d0f3}.side-nav__circle-inner{background-color:#fff;height:28px;width:28px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.side-nav__circle-inner img{margin-top:2px}.side-nav__page{margin-left:1.5rem;line-height:40px;color:#000}.is-active .side-nav__page{font-weight:700}.side-nav__line{background-color:#c0d0f3;width:4px;height:1.5rem;border-radius:2px;margin-left:18px;margin-top:.5rem;margin-bottom:.5rem;visibility:hidden}.side-nav__line.is-active{visibility:visible}.side-nav__wrap{height:40px;cursor:pointer}.side-nav__wrap:hover .side-nav__circle{background-color:#d5d5d5}.footer{padding:4rem;background-color:#000;color:#fff}.footer:after{clear:both;content:"";display:table}.footer__logo{height:2rem}.footer__header{font-weight:700;margin-bottom:1rem;margin-top:2rem;display:block}@media (min-width:59.375em){.footer__header{margin-top:0}}.footer__list{margin:0}.footer__list a{color:#fff}.footer__list a:hover{color:#e6e6e6}.footer__list li{margin-bottom:.5rem}.footer__div{background-color:#3e3e3e}.footer__legal{font-size:12.003px;font-size:.75019rem;margin:0}.footer__legal li{float:left;margin-right:1.5rem}.footer__legal a{color:#fff}.bottom-nav{padding:2rem 0;background-color:#306ffd;background-image:-webkit-gradient(linear,left top,right top,from(#2f6cfc),to(#0039b7));background-image:linear-gradient(90deg,#2f6cfc,#0039b7)}.bottom-nav__item{width:50%;float:left;padding:0 3rem;height:6rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-nav__item--right{border-left:1px solid hsla(0,0%,100%,.2);-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.bottom-nav__item--left{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (min-width:59.375em){.bottom-nav__item{padding:0 6rem}}.bottom-nav__inner{cursor:pointer;color:#fff}.bottom-nav__lead{display:block}.bottom-nav__title{font-size:21.328px;font-size:1.333rem;display:block;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";text-transform:uppercase;-webkit-transition:border-bottom .2s ease;transition:border-bottom .2s ease;border-bottom:2px solid transparent}.bottom-nav__title:hover{border-bottom:2px solid #fff}@media (min-width:59.375em){.bottom-nav__title{font-size:28.43022px;font-size:1.77689rem}}.homework{background-color:#1f2534;padding:2rem;color:#fff;text-align:center}.homework__logo{height:85px;display:block;margin-bottom:2rem;margin-left:auto;margin-right:auto}.homework__title{border-bottom:0;line-height:3rem;display:inline-block;margin-bottom:2rem;padding-bottom:0}.homework__title:after{content:" ";border-bottom:2px solid #306ffd;display:block;width:100%;margin-top:.5rem}.homework__content{text-align:left}.homework__content p code{background-color:#000}.homework__content a{color:#fff;text-decoration:underline}@media (min-width:59.375em){.homework__content{width:65.85366%;float:left;margin-right:2.43902%;margin-left:14.63415%}.homework__content:last-child{margin-right:0}}.cta{padding:4rem 0;background-color:blue;background-color:#0727a9;background-image:-webkit-gradient(linear,left top,right top,from(#0727a9),to(#0772ac));background-image:linear-gradient(90deg,#0727a9,#0772ac)}.cta__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width:59.375em){.cta__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.cta__logo{margin-bottom:2rem}@media (min-width:59.375em){.cta__logo{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}}.cta__text{font-size:37.89749px;font-size:2.36859rem;text-transform:uppercase;line-height:4rem;font-family:Antonio,Open Sans,Helvetica Neue,Helvetica,Arial,"sans-serif";color:#fff;text-align:center;margin-bottom:2rem}@media (min-width:59.375em){.cta__text{-webkit-box-flex:2;-ms-flex:2 0 0px;flex:2 0 0;text-align:left;margin-bottom:0;padding:0 1rem}}@media (min-width:75em){.cta__text{font-size:50.51735px;font-size:3.15733rem}}@media (min-width:59.375em){.cta__download{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}}.button,button{font-size:16px;font-size:1rem;display:inline-block;font-weight:inherit;border-radius:2px;line-height:inherit;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:.25rem .5rem;border:2px solid transparent;background:#306ffd;-webkit-transition:all .3s ease;transition:all .3s ease;text-decoration:none}.button:active,.button:focus,.button:hover,button:active,button:focus,button:hover{background:#023ec5;text-decoration:none;outline:0;background-image:none}.button:disabled,button:disabled{cursor:not-allowed;opacity:.65;-webkit-box-shadow:none;box-shadow:none}.button-download{display:block;margin-bottom:1rem;background-color:#306efe;border-radius:100px;color:#fff;padding:1rem 2rem;border:none;-webkit-transition:all .3s ease;transition:all .3s ease;font-weight:700}.button-download:hover{background-color:#014cfa}.button--primary{color:#fff;background-color:#306ffd;border-color:#306ffd}.button--primary:active,.button--primary:focus,.button--primary:hover{color:#fff;background-color:#024ef8;border-color:#024ef8}.button--secondary{color:#fff;background-color:#1a1a1a;border-color:#1a1a1a}.button--secondary:active,.button--secondary:focus,.button--secondary:hover{color:#fff;background-color:#343434;border-color:#343434}.button-outline--primary{color:#306ffd;background-image:none;background-color:transparent;border-color:#306ffd}.button-outline--primary:active,.button-outline--primary:focus,.button-outline--primary:hover{color:#fff;background-color:#306ffd;border-color:#306ffd}.button-outline--secondary{color:#1a1a1a;background-image:none;background-color:transparent;border-color:#1a1a1a}.button-outline--secondary:active,.button-outline--secondary:focus,.button-outline--secondary:hover{color:#fff;background-color:#1a1a1a;border-color:#1a1a1a}.button--large{font-size:21.328px;font-size:1.333rem;padding:.75rem 1.25rem}.button--small{font-size:12.003px;font-size:.75019rem;padding:.25rem .75rem}.button--block{display:block;width:100%}.button--block+.button--block{margin-top:.5rem}input[type=button].button--block,input[type=reset].button--block,input[type=submit].button--block{width:100%}.hero{padding:5rem 0 9rem;background-color:#306ffd;background-image:linear-gradient(60deg,#306efe,#003ab7);text-align:center;color:#fff;position:relative}.hero h1{margin:0}.hero h3{display:inline-block;margin-bottom:2rem}.hero h3:after{content:" ";border-bottom:3px solid #fff;display:block;width:100%;margin-top:.5rem}.hero__breadcrumb{float:left;font-weight:700;margin-top:-4rem;cursor:pointer;font-size:14px;opacity:.7;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.hero__breadcrumb span{color:#fff;font-weight:700;margin-left:.5rem}.hero__breadcrumb:hover{opacity:1}.hero--gray{background-color:#ecf1fc;background-image:none;text-align:left}.hero--gray .hero__breadcrumb span{color:#000}.hero--gray .hero__breadcrumb img{display:none}.hero__div{position:absolute;bottom:0;left:0;width:100%;height:auto;margin-bottom:-1px}.code-block{background-color:#f4f7fe;padding:0 2rem;border-left:.5rem solid #306ffd;overflow:scroll;margin-bottom:2rem;margin-top:2rem;color:#000}.term{margin-bottom:1.5rem}.term:after{clear:both;content:"";display:table}.term__img{width:31.70732%;float:left;margin-right:2.43902%}.term__img:last-child{margin-right:0}.term__text{width:65.85366%;margin-right:2.43902%;padding-left:1rem;float:left;padding-top:1rem}.term__text:last-child{margin-right:0}.term__name{font-weight:700}.download-button{border:2px solid #fff;color:#fff;background-color:transparent;font-size:14px;font-weight:700;padding:0 .5rem;line-height:35px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.download-button:hover{background-color:hsla(0,0%,100%,.2)}.download-button.float-left{float:left}.download-button.float-right{float:right}.download-white{font-size:16px;font-size:1rem;border:0 solid #fff;color:#306ffd;background-color:#fff;border-radius:50px;padding:1rem 1.5rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:-webkit-box-shadow .2s ease;transition:-webkit-box-shadow .2s ease;transition:box-shadow .2s ease;transition:box-shadow .2s ease,-webkit-box-shadow .2s ease;font-weight:700}.download-white:active,.download-white:focus,.download-white:hover{background-color:#fff;-webkit-box-shadow:0 0 20px rgba(0,0,0,.7);box-shadow:0 0 20px rgba(0,0,0,.7)}.download-white.float-left{float:left}.download-white.float-right{float:right}.download-white img{margin-right:10px;max-width:none;height:14px}.download-button__icon{margin-right:.5rem}.tutorial-list{padding:4rem 0 8rem}.tutorial-list__title{border-bottom:0 solid transparent;padding-bottom:0;margin-bottom:6rem;text-align:center}.tutorial-item{margin-bottom:4rem}@media (min-width:59.375em){.tutorial-item{margin-bottom:0}}.tutorial-item__img{margin-bottom:1.5rem;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.tutorial-item__img:hover{opacity:.8}.tutorial-item__title{border-bottom:0 solid transparent;margin-bottom:1.5rem;padding-bottom:0}.tutorial-item__btn{background-color:transparent;border:2px solid #306ffd;border-radius:20px;padding:.5rem 1.5rem;font-weight:700;color:#306ffd;margin-top:1rem}.tutorial-item__btn img{margin-left:.5rem}.tutorial-item__btn:hover{color:#306ffd;background-color:#e1eaff}.not-found__dino{height:300px}@media (min-width:59.375em){.not-found__dino{width:48.78049%;float:left;margin-right:2.43902%}.not-found__dino:last-child{margin-right:0}}.not-found__dino img{height:300px;margin-left:auto;margin-right:auto;display:block}@media (min-width:59.375em){.not-found__dino img{float:right;margin:0}}.not-found__text{color:#000;text-align:center;margin-top:1.5rem}@media (min-width:59.375em){.not-found__text{width:48.78049%;float:left;margin-right:2.43902%;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:300px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:0}.not-found__text:last-child{margin-right:0}}.img-caption__img{margin-bottom:0!important}.img-caption__text{width:100%;display:block;background-color:#ebebeb;margin-bottom:1.5rem;text-align:center;padding:.5rem;font-size:14px}.img-caption--dark .img-caption__text{background-color:#282828;color:#fff}.video-player{border-bottom:1px solid #eee;margin-bottom:2rem;cursor:pointer}.video-player__text{border-bottom:0 transparent;margin-bottom:0;display:inline-block;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.video-player__text:hover{opacity:.8}.video-player__icon{height:2rem;margin-left:.5rem;vertical-align:middle;top:3px;position:relative;opacity:.6}.modal-video-close-btn:hover{background-color:transparent}.container-2{display:grid;grid-template-columns:150px 150px 150px;grid-template-rows:150px 150px;grid-gap:1rem}.container-4{display:grid;width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,150px);grid-gap:1rem}.container-5{width:100%;display:grid;grid-template-columns:100px 30% 1fr;grid-template-rows:200px 100px;grid-gap:1rem}.container-6{display:grid;width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,100px);grid-auto-rows:150px;grid-gap:1rem}.item1{grid-row:2/3;grid-column:2/3}.container-7{display:grid;width:100%;height:600px;grid-template-columns:200px 1fr 1fr;grid-template-rows:80px 1fr 1fr 100px;grid-gap:1rem}.header-7{grid-row:1/2;grid-column:1/4}.sidebar-7{grid-row:2/4;grid-column:1/2}.content-1-7{grid-row:2/3;grid-column:2/4}.content-2-7{grid-row:3/4;grid-column:2/3}.content-3-7{grid-row:3/4;grid-column:3/4}.footer-7{grid-row:4/5;grid-column:1/4}.container-8{display:grid;width:100%;height:600px;grid-template-columns:200px 1fr 1fr;grid-template-rows:80px 1fr 1fr 100px;grid-gap:1rem;grid-template-areas:"header header header" "sidebar content-1 content-1" "sidebar content-2 content-3" "footer footer footer"}.header-8{grid-area:header}.sidebar-8{grid-area:sidebar}.content-1-8{grid-area:content-1}.content-2-8{grid-area:content-2}.content-3-8{grid-area:content-3}.footer-8{grid-area:footer}.container-9{display:grid;width:100%;height:600px;grid-gap:1rem;grid-template-columns:[main-start sidebar-start] 200px [sidebar-end content-start] 1fr [column3-start] 1fr [content-end main-end];grid-template-rows:[row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 100px [row4-end]}.header-9{grid-column:main-start/main-end;grid-row:row1-start/row2-start}.sidebar-9{grid-column:sidebar-start/sidebar-end;grid-row:row2-start/row4-start}.content-1-9{grid-column:content-start/content-end;grid-row:row2-start/row3-start}.content-2-9{grid-column:content-start/column3-start}.content-2-9,.content-3-9{grid-row:row3-start/row4-start}.content-3-9{grid-column:column3-start/content-end}.footer-9{grid-column:main-start/main-end;grid-row:row4-start/row4-end}.item{background-color:#1eaafc;background-image:linear-gradient(130deg,#6c52d9,#1eaafc 85%,#3edfd7);-webkit-box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);color:#fff;border-radius:4px;border:6px solid #171717;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:18px;font-weight:700}.header-7,.header-8,.header-9{background-color:#1eaafc;background-image:linear-gradient(160deg,#6c52d9,#9b8ae6 127%)}.sidebar-7,.sidebar-8,.sidebar-9{background-image:linear-gradient(203deg,#3edfd7,#29a49d 90%)}.content-1-7,.content-1-8,.content-1-9,.content-2-7,.content-2-8,.content-2-9,.content-3-7,.content-3-8,.content-3-9{background-image:linear-gradient(130deg,#6c52d9,#1eaafc 85%,#3edfd7)}.footer-7,.footer-8,.footer-9{background-color:#6c52d9;background-image:linear-gradient(160deg,#6c52d9,#9b8ae6 127%)}.test{border:4px solid #000;background-color:rgba(0,0,0,.5);color:#fff;padding:1rem;text-align:center;margin-bottom:1rem}.gallery{float:left;margin-right:-100%}.gallery:nth-child(3n+1){width:31.70732%;clear:both;margin-left:0}.gallery:nth-child(3n+2){width:31.70732%;clear:none;margin-left:34.14634%}.gallery:nth-child(3n+3){width:31.70732%;clear:none;margin-left:68.29268%}@-webkit-keyframes modal-video{0%{opacity:0}to{opacity:1}}@keyframes modal-video{0%{opacity:0}to{opacity:1}}@-webkit-keyframes modal-video-inner{0%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes modal-video-inner{0%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translate(0);transform:translate(0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000000;cursor:pointer;opacity:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:modal-video;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-effect-leave{opacity:0}.modal-video-effect-leave .modal-video-movie-wrap{-webkit-transform:translateY(100px);transform:translateY(100px)}.modal-video-body{max-width:940px;width:100%;height:100%;margin:0 auto;display:table}.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:modal-video-inner;animation-name:modal-video-inner;-webkit-transform:translate(0);transform:translate(0);-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-35px;right:-35px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}.modal-video-close-btn:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.modal-video-close-btn:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.modal-video-close-btn:after,.modal-video-close-btn:before{content:"";position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}</style></head><body><div id="___gatsby"><div class="wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-195978090"><header class="header" data-reactid="3"><div class="container" data-reactid="4"><a href="/playground/" data-reactid="5"><img alt="logo" class="header__logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTA1cHgiIGhlaWdodD0iMzVweCIgdmlld0JveD0iMCAwIDEwNSAzNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDYuMiAoNDQ0OTYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkxvZ288L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0yQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTEyLjAwMDAwMCwgLTI5LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5NC4wMDAwMDAsIC04NDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iTG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDA2LjAwMDAwMCwgODcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOSIgZmlsbD0iIzAwMDAwMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwNSIgaGVpZ2h0PSIzNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05OC4yNzE4Mzc3LDI0LjMwMTQwNTYgTDk4LjMyODE1NDUsMjYuMjQxNzA4NyBDOTcuNjUyMzUyNCwyNi42MTI2NDg5IDk2LjgzNTc1ODEsMjYuODQwOTE5OSA5Ni4wNDczMjIzLDI2Ljg0MDkxOTkgQzk0LjMyOTY1ODYsMjYuODQwOTE5OSA5My40Mjg1ODkxLDI1Ljg3MDc2ODQgOTMuMjMxNDgwMSwyNC4zMDE0MDU2IEM5Mi41Mjc1MTk1LDI1LjU4NTQyOTcgOTEuMjMyMjMyMSwyNi44NDA5MTk5IDg5LjE3NjY2NzMsMjYuODQwOTE5OSBDODcuMzQ2MzY5OSwyNi44NDA5MTk5IDg1LjI5MDgwNSwyNS44NzA3Njg0IDg1LjI5MDgwNSwyMy4xNjAwNTA5IEM4NS4yOTA4MDUsMjAuMDIxMzI1NSA4OC4yNDc0Mzk0LDE5LjI3OTQ0NDkgOTEuMjA0MDczNywxOS4yNzk0NDQ5IEM5MS44Nzk4NzU4LDE5LjI3OTQ0NDkgOTIuNjExOTk0OCwxOS4yNzk0NDQ5IDkzLjIzMTQ4MDEsMTkuMzkzNTgwNCBMOTMuMjMxNDgwMSwxOC45NjU1NzI0IEM5My4yMzE0ODAxLDE3LjYyNDQ4MDYgOTMuMjMxNDgwMSwxNi4wODM2NTE3IDkxLjIwNDA3MzcsMTYuMDgzNjUxNyBDOTAuNDE1NjM3OSwxNi4wODM2NTE3IDg5LjgyNDMxMSwxNi4xMTIxODU2IDg5LjIzMjk4NDEsMTYuNDU0NTkyIEw4OC44MTA2MDc4LDE3LjkwOTgxOTIgTDg1LjkzODQ0ODcsMTcuNTY3NDEyOCBMODYuNDE3MTQxOSwxNC41OTk4OTA2IEM4OC42MTM0OTg5LDEzLjcxNTM0MDcgODkuNzk2MTUyNiwxMy40MzAwMDIgOTEuODc5ODc1OCwxMy40MzAwMDIgQzk0LjU1NDkyNTksMTMuNDMwMDAyIDk2LjkyMDIzMzQsMTQuODg1MjI5MyA5Ni45MjAyMzM0LDE3LjgyNDIxNzYgTDk2LjkyMDIzMzQsMjMuMzg4MzIxOSBDOTYuOTIwMjMzNCwyNC4xNTg3MzYzIDk3LjIwMTgxNzYsMjQuMzg3MDA3MiA5Ny43OTMxNDQ1LDI0LjM4NzAwNzIgQzk3LjkwNTc3ODIsMjQuMzg3MDA3MiA5OC4xMDI4ODcxLDI0LjM4NzAwNzIgOTguMjcxODM3NywyNC4zMDE0MDU2IFogTTkwLjUwMDExMzEsMjQuMjQ0MzM3OSBDOTEuNzk1NDAwNiwyNC4yNDQzMzc5IDkzLjE0NzAwNDgsMjMuMjQ1NjUyNSA5My4yMzE0ODAxLDIxLjEzNDE0NjMgQzkyLjY0MDE1MzIsMjEuMDQ4NTQ0NyA5Mi4wMjA2Njc5LDIwLjk2Mjk0MzEgOTEuNDI5MzQxMSwyMC45NjI5NDMxIEM5MC4xMzQwNTM3LDIwLjk2Mjk0MzEgODguOTc5NTU4MywyMS4zMDUzNDk1IDg4Ljk3OTU1ODMsMjIuNzYwNTc2OCBDODguOTc5NTU4MywyMy41NTk1MjUxIDg5LjQzMDA5MzEsMjQuMjQ0MzM3OSA5MC41MDAxMTMxLDI0LjI0NDMzNzkgWiBNODIuMDI0NDI4MSw2LjkyNDI4MDEyIEw4NS42MDA1NDc3LDYuOTI0MjgwMTIgTDgwLjEwOTY1NTMsMjYuNTU1NTgxMiBMNzYuNTYxNjk0MSwyNi41NTU1ODEyIEw4Mi4wMjQ0MjgxLDYuOTI0MjgwMTIgWiBNNzQuNjc1MDc5OSw2LjkyNDI4MDEyIEw3OC4yNTExOTk1LDYuOTI0MjgwMTIgTDcyLjc2MDMwNzEsMjYuNTU1NTgxMiBMNjkuMTg0MTg3NSwyNi41NTU1ODEyIEw3NC42NzUwNzk5LDYuOTI0MjgwMTIgWiBNNjMuMDE3NDkzMSwxOC4zMDkyOTM0IEw2Ni43OTA3MjE2LDE4LjMwOTI5MzQgTDY2Ljc5MDcyMTYsMTMuNjg2ODA2OCBMNjMuMDE3NDkzMSwxMy42ODY4MDY4IEw2My4wMTc0OTMxLDE4LjMwOTI5MzQgWiBNNjMuMDE3NDkzMSwyNi41NTU1ODEyIEw2Ni43OTA3MjE2LDI2LjU1NTU4MTIgTDY2Ljc5MDcyMTYsMjEuOTMzMDk0NiBMNjMuMDE3NDkzMSwyMS45MzMwOTQ2IEw2My4wMTc0OTMxLDI2LjU1NTU4MTIgWiBNNTYuODc4OTU3LDIzLjc4Nzc5NiBMNTIuNzY3ODI3NCwyMy43ODc3OTYgTDU5LjgwNzQzMjksMTUuNTk4NTc1OSBMNTkuNTI1ODQ4NywxMy42ODY4MDY4IEw0OC4zNDY5NTUxLDEzLjY4NjgwNjggTDQ3Ljg5NjQyMDMsMTguMTk1MTU3OSBMNTAuNTcxNDcwNCwxOC40ODA0OTY2IEw1MS4xMzQ2Mzg5LDE2LjQ1NDU5MiBMNTUuMDc2ODE4LDE2LjQ1NDU5MiBMNDguMDkzNTI5MywyNC42MTUyNzgyIEw0OC40NTk1ODg4LDI2LjU1NTU4MTIgTDU5LjU4MjE2NTUsMjYuNTU1NTgxMiBMNjAuMzQyNDQyOSwyMi4wNDcyMzAxIEw1Ny40NzAyODM5LDIxLjc5MDQyNTMgTDU2Ljg3ODk1NywyMy43ODc3OTYgWiBNMzkuMjc5OTQzMSwxMy40MzAwMDIgQzQzLjg0MTYwNzUsMTMuNDMwMDAyIDQ2LjA5NDI4MTMsMTYuNTQwMTkzNiA0Ni4wOTQyODEzLDIwLjE2Mzk5NDggQzQ2LjA5NDI4MTMsMjQuMjQ0MzM3OSA0My4xMzc2NDcsMjYuODQwOTE5OSAzOS4wODI4MzQyLDI2Ljg0MDkxOTkgQzM1LjE0MDY1NTEsMjYuODQwOTE5OSAzMi40NjU2MDQ5LDI0LjQ0NDA3NSAzMi40NjU2MDQ5LDIwLjMwNjY2NDEgQzMyLjQ2NTYwNDksMTYuNTQwMTkzNiAzNC43MTgyNzg3LDEzLjQzMDAwMiAzOS4yNzk5NDMxLDEzLjQzMDAwMiBaIE0zOS4xNjczMDk0LDI0LjAxNjA2NyBDNDEuMDgyMDgyMSwyNC4wMTYwNjcgNDIuMzIxMDUyNywyMi40NzUyMzgxIDQyLjMyMTA1MjcsMjAuMDIxMzI1NSBDNDIuMzIxMDUyNywxNy40NTMyNzc0IDQwLjk0MTI5LDE2LjI1NDg1NDkgMzkuMjIzNjI2MywxNi4yNTQ4NTQ5IEMzNy4zNjUxNzA0LDE2LjI1NDg1NDkgMzYuMTgyNTE2NywxNy42ODE1NDgzIDM2LjE4MjUxNjcsMjAuMDc4MzkzMiBDMzYuMTgyNTE2NywyMi4yNzU1MDEgMzcuMjI0Mzc4MywyNC4wMTYwNjcgMzkuMTY3MzA5NCwyNC4wMTYwNjcgWiBNMjkuMTk5MjI4LDE3LjkwOTgxOTIgQzI5LjE5OTIyOCwxNC44MjgxNjE1IDI3LjA4NzM0NjMsMTMuNDMwMDAyIDI0Ljg2MjgzMDksMTMuNDMwMDAyIEMyMi44MzU0MjQ1LDEzLjQzMDAwMiAyMS4zNzExODY2LDE0LjUxNDI4OSAyMC42OTUzODQ1LDE2LjIyNjMyMSBDMjAuMTA0MDU3NiwxNC4zMTQ1NTE5IDE4LjQxNDU1MjMsMTMuNDMwMDAyIDE2LjU1NjA5NjQsMTMuNDMwMDAyIEMxNC43ODIxMTU4LDEzLjQzMDAwMiAxMy40NTg2Njk5LDE0LjI4NjAxOCAxMi42OTgzOTI1LDE1LjYyNzEwOTggTDEyLjY5ODM5MjUsMTMuNjg2ODA2OCBMNy4zNzY0NTA3NCwxMy42ODY4MDY4IEw3LjM3NjQ1MDc0LDE2LjQ4MzEyNTkgTDkuMDY1OTU2MDgsMTYuNDgzMTI1OSBMOS4wNjU5NTYwOCwyMy43ODc3OTYgTDcuMzc2NDUwNzQsMjMuNzg3Nzk2IEw3LjM3NjQ1MDc0LDI2LjU1NTU4MTIgTDE1LjA5MTg1ODQsMjYuNTU1NTgxMiBMMTUuMDkxODU4NCwyMy43ODc3OTYgTDEyLjY5ODM5MjUsMjMuNzg3Nzk2IEwxMi42OTgzOTI1LDE5LjI3OTQ0NDkgQzEyLjY5ODM5MjUsMTcuNDgxODExMiAxMy40MzA1MTE1LDE2LjIyNjMyMSAxNS4xNDgxNzUzLDE2LjIyNjMyMSBDMTYuNTU2MDk2NCwxNi4yMjYzMjEgMTcuMzE2MzczOCwxNy4xMTA4NzA5IDE3LjMxNjM3MzgsMTkuMzM2NTEyNiBMMTcuMzE2MzczOCwyNi41NTU1ODEyIEwyMi42MzgzMTU2LDI2LjU1NTU4MTIgTDIyLjYzODMxNTYsMjMuNzg3Nzk2IEwyMC45NDg4MTAzLDIzLjc4Nzc5NiBMMjAuOTQ4ODEwMywxOS4yNzk0NDQ5IEMyMC45NDg4MTAzLDE3LjQ4MTgxMTIgMjEuNjUyNzcwOCwxNi4yMjYzMjEgMjMuMzcwNDM0NiwxNi4yMjYzMjEgQzI0Ljg2MjgzMDksMTYuMjI2MzIxIDI1LjU5NDk0OTksMTcuMTEwODcwOSAyNS41OTQ5NDk5LDE5LjMzNjUxMjYgTDI1LjU5NDk0OTksMjYuNTU1NTgxMiBMMzAuOTE2ODkxNywyNi41NTU1ODEyIEwzMC45MTY4OTE3LDIzLjc4Nzc5NiBMMjkuMTk5MjI4LDIzLjc4Nzc5NiBMMjkuMTk5MjI4LDE3LjkwOTgxOTIgWiIgaWQ9Im1vemlsbGEiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" data-reactid="6"/></a><a href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&utm_medium=referral&utm_content=header" target="_blank" rel="noopener noreferrer" data-reactid="7"><button class="download-button undefined float-right" data-reactid="8"><img class="download-button__icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTEgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0xQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxMi4wMDAwMDAsIC00Mi4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTMuMDAwMDAwLCAtNTgzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmtzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgzLjAwMDAwMCwgNjEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4zMjA0NDIsIDIwLjI0NDg1Mikgc2NhbGUoLTEsIC0xKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjMyMDQ0MiwgLTIwLjI0NDg1MikgdHJhbnNsYXRlKDEwLjgyMDQ0MiwgMTUuMjQ0ODUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNDYyNTM3MSw1LjYwMTg0ODQxIEMxMC43OTQ4NzY0LDUuMjU5NDA1OTYgMTAuNzkxMjg4OSw0LjcwNDA1Nzk5IDEwLjQ1ODYyMzQsNC4zNjE2MTU1NCBMNi41MDgwNTc0NCwwLjMwOTc2NzQ2OSBDNS41ODU3MjYwMywtMC42Mjk1NDExOTEgNC4yMDE5MDI3NiwwLjc3OTQyMTggNS4xMjQ1NjAzMiwxLjcxODczMDQ2IEw2Ljg0ODIyNDIzLDMuNDc0MTIxNjUgQzcuMTM0OTAzNjIsMy43NjYwNzc5MSA3LjAzOTM0MzgyLDQuMDAzNTYyMjQgNi42MzY1NTc2NSw0LjAwMzU2MjI0IEwwLjk3ODQyNzk1Miw0LjAwMzU2MjI0IEMwLjQzODAwOTU4LDQuMDAzNTYyMjQgMy41NTI3MTM2OGUtMTQsNC40NDk5NjYzNiAzLjU1MjcxMzY4ZS0xNCw1IEMzLjU1MjcxMzY4ZS0xNCw1LjU1MDAzMzY0IDAuNDM4MDA5NTgsNS45OTY0Mzc3NiAwLjk3ODQyNzk1Miw1Ljk5NjQzNzc2IEw2LjYzNjU1NzY1LDUuOTk2NDM3NzYgQzcuMDQwNjQ4MzksNS45OTY0Mzc3NiA3LjEzNzE4NjYyLDYuMjMyNTkzNTEgNi44NDgyMjQyMyw2LjUyNzIwNjk0IEw1LjEyNDU2MDMyLDguMjgxMjY5NTQgQzQuMjAxOTAyNzYsOS4yMjA1NzgyIDUuNTg1NzI2MDMsMTAuNjI5NTQxMiA2LjUwODA1NzQ0LDkuNjkwMjMyNTMgTDEwLjQ2MjUzNzEsNS42MDE4NDg0MSBaIiBpZD0iUGFnZS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjM1NDk4MiwgNS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTUuMzU0OTgyLCAtNS4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="download" data-reactid="9"/>Download Firefox</button></a></div></header><div data-reactid="11"><div class="hero " data-reactid="13"><div class="container" data-reactid="14"><a href="/playground/" data-reactid="15"><div class="hero__breadcrumb" data-reactid="16"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTMgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ3LjEgKDQ1NDIyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYWdlIDE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0id2lyZXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSI0MDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTIuMDAwMDAwLCAtMTI5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxNi4wMDAwMDAsIC03MDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4LjAwMDAwMCwgODI1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUwMDAwMCwgMTMuNTAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC02LjUwMDAwMCwgLTEzLjUwMDAwMCkgdHJhbnNsYXRlKDAuMDAwMDAwLCA3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNjI4MTIxNCw3LjI4MjQwMjkzIEMxMy4wNjgxMTUxLDYuODM3MjI3NzUgMTMuMDYzMzY1NCw2LjExNTI3NTM4IDEyLjYyMjk0LDUuNjcwMTAwMjEgTDcuMzkyNjcxMzgsMC40MDI2OTc3MSBDNi4xNzE1NzAxMiwtMC44MTg0MDM1NDkgNC4zMzk0ODY0NCwxLjAxMzI0ODM0IDUuNTYxMDE5NDksMi4yMzQzNDk2IEw3Ljg0MzAyODAzLDQuNTE2MzU4MTQgQzguMjIyNTcxMTcsNC44OTU5MDEyOCA4LjA5NjA1Njc5LDUuMjA0NjMwOTEgNy41NjI3OTY1Miw1LjIwNDYzMDkxIEwxLjI5NTM2OTA5LDUuMjA0NjMwOTEgQzAuNTc5ODkzNTYxLDUuMjA0NjMwOTEgMCw1Ljc4NDk1NjI2IDAsNi41IEMwLDcuMjE1MDQzNzQgMC41Nzk4OTM1NjEsNy43OTUzNjkwOSAxLjI5NTM2OTA5LDcuNzk1MzY5MDkgTDcuNTYyNzk2NTIsNy43OTUzNjkwOSBDOC4wOTc3ODM5NSw3Ljc5NTM2OTA5IDguMjI1NTkzNyw4LjEwMjM3MTU2IDcuODQzMDI4MDMsOC40ODUzNjkwMiBMNS41NjEwMTk0OSwxMC43NjU2NTA0IEM0LjMzOTQ4NjQ0LDExLjk4Njc1MTcgNi4xNzE1NzAxMiwxMy44MTg0MDM1IDcuMzkyNjcxMzgsMTIuNTk3MzAyMyBMMTIuNjI4MTIxNCw3LjI4MjQwMjkzIFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" alt="arrow left" data-reactid="17"/><span data-reactid="18">Playground Home</span></div></a></div><h3 data-reactid="19">Firefox DevTools</h3><h1 data-reactid="20">Introduction to Debugger</h1><svg width="100%" height="47px" viewBox="0 0 1440 47" version="1.1" xmlns="http://www.w3.org/2000/svg" class="hero__div" preserveAspectRatio="none" data-reactid="21"><defs data-reactid="22"></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" data-reactid="23"><path d="M0,0.0577405639 C117.504588,18.44359 269.602477,22.1720696 456.293666,11.2431795 C562.076057,5.05068514 730.784198,0.911127653 885.297232,3.27366179 C1157.17617,7.43074321 1386.98062,21.3276838 1440,38.3891927 L1440,46.9388979 L0,46.9388979 L0,0.0577405639 Z" id="Path-9" fill="#FFFFFF" data-reactid="24"></path></g></svg></div><div class="main" data-reactid="25"><div class="container" data-reactid="26"><div class="side" data-reactid="27"><a href="/playground/debugger" data-reactid="28"><div class="side-nav__item is-active" data-reactid="29"><div class="side-nav__wrap" data-reactid="30"><div class="side-nav__circle" data-reactid="31"><div class="side-nav__circle-inner" data-reactid="32"><img alt="current" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTYgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAyIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0zQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODguMDAwMDAwLCAtNTMwLjAwMDAwMCkiIGZpbGw9IiNGRjlFMkUiPgogICAgICAgICAgICA8ZyBpZD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAuMDAwMDAwLCA0MDkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2lkZWJhciI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAxMTEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgMTcuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtMTcuMDAwMDAwKSB0cmFuc2xhdGUoOS4wMDAwMDAsIDkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQuNjEwMTM5Miw5LjI5Nzg1NzAyIEMxNS4xMTMxMDY4LDguNzg0NTM1IDE1LjEwNzY3NzMsNy45NTIwNjcwOSAxNC42MDQyMTYxLDcuNDM4NzQ1MDggTDkuNjI1MzY3MiwyLjM2NTAxNTQxIEM4LjIyOTQ5NjI1LDAuOTU2OTg5NTQ4IDYuMTM1MTk2MjUsMy4wNjkwMjgzNCA3LjUzMTU2MDc4LDQuNDc3MDU0MiBMOS4xNDAxODA5OCw2LjEwODM4OTY3IEM5LjU3NDA0NjEsNi41NDYwMzI3OCA5LjQyOTQyNDQsNi45MDIwMjIzNSA4LjgxOTg0MTQ0LDYuOTAyMDIyMzUgTDEuMjU2NzM4NTMsNi45MDIwMjIzNSBDMC40Mzg4NjA4MjMsNi45MDIwMjIzNSAtMC4yMjQwMjk3OTgsNy41NzExODMxNSAtMC4yMjQwMjk3OTgsOC4zOTU2ODQ4NiBDLTAuMjI0MDI5Nzk4LDkuMjIwMTg2NTcgMC40Mzg4NjA4MjMsOS44ODkzNDczNyAxLjI1NjczODUzLDkuODg5MzQ3MzcgTDguODE5ODQxNDQsOS44ODkzNDczNyBDOS40MzEzOTg3Niw5Ljg4OTM0NzM3IDkuNTc3NTAxMjMsMTAuMjQzMzQ1NCA5LjE0MDE4MDk4LDEwLjY4NDk3MTYgTDcuNTMxNTYwNzgsMTIuMzE0MzE1NSBDNi4xMzUxOTYyNSwxMy43MjIzNDE0IDguMjI5NDk2MjUsMTUuODM0MzgwMiA5LjYyNTM2NzIsMTQuNDI2MzU0MyBMMTQuNjEwMTM5Miw5LjI5Nzg1NzAyIFoiIGlkPSJQYWdlLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMzgwMjg1LCA4LjM5NTY4NSkgc2NhbGUoLTEsIDEpIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNy4zODAyODUsIC04LjM5NTY4NSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==" data-reactid="33"/></div></div><span class="side-nav__page" data-reactid="35">Introduction</span></div><div class="side-nav__line" data-reactid="36"></div></div></a><a href="/playground/debugger/02-check-variable-values/" data-reactid="37"><div class="side-nav__item" data-reactid="38"><div class="side-nav__wrap" data-reactid="39"><div class="side-nav__circle" data-reactid="40"><div class="side-nav__circle-inner" data-reactid="41"></div></div><span class="side-nav__page" data-reactid="44">Check Values</span></div><div class="side-nav__line" data-reactid="45"></div></div></a><a href="/playground/debugger/03-the-call-stack" data-reactid="46"><div class="side-nav__item" data-reactid="47"><div class="side-nav__wrap" data-reactid="48"><div class="side-nav__circle" data-reactid="49"><div class="side-nav__circle-inner" data-reactid="50"></div></div><span class="side-nav__page" data-reactid="53">The Call Stack</span></div><div class="side-nav__line" data-reactid="54"></div></div></a><a href="/playground/debugger/04-conditional-breakpoints" data-reactid="55"><div class="side-nav__item" data-reactid="56"><div class="side-nav__wrap" data-reactid="57"><div class="side-nav__circle" data-reactid="58"><div class="side-nav__circle-inner" data-reactid="59"></div></div><span class="side-nav__page" data-reactid="62">Conditional Breakpoints</span></div><div class="side-nav__line" data-reactid="63"></div></div></a><a href="/playground/debugger/05-learn-more" data-reactid="64"><div class="side-nav__item" data-reactid="65"><div class="side-nav__wrap" data-reactid="66"><div class="side-nav__circle" data-reactid="67"><div class="side-nav__circle-inner" data-reactid="68"></div></div><span class="side-nav__page" data-reactid="71">Learn More</span></div><div class="side-nav__line" data-reactid="72"></div></div></a></div><div class="content" data-reactid="73"><div data-reactid="74"><h2 data-reactid="75">Introduction to Firefox Debugger</h2><p data-reactid="76">Are you only using <code data-reactid="78">console.log</code> to debug your JavaScript code? It is OK to admit. Using <code data-reactid="80">console.log</code> is easy and convenient, but it has limitations. It isn’t great for catching things as they happen, or diving deep into code to see exactly where it is broken. To do that, you’ll need a full-featured debugger. The Firefox Debugger has comprehensive tools to evaluate and repair broken code. Once you learn the basics, you’ll find that using a debugger is not only fast and easy, but it can save you from hours of frustration, and potential ‘bang-head-on-desk’ sessions.</p><p data-reactid="82">We’ll learn the basics of Firefox Debugger by debugging a simple to-do app. You will need Firefox to follow along. Don’t have Firefox? Check out <a href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&utm_medium=referral&utm_content=debugger-part1" target="_blank" rel="noopener noreferrer" data-reactid="85">Firefox Developer Edition</a>.</p><p data-reactid="87">Before diving in, let’s take a look at the Debugger interface. Hit <span class="shortcut" data-reactid="90">option</span> + <span class="shortcut" data-reactid="92">command</span> + <span class="shortcut" data-reactid="95">S</span> on Mac or <span class="shortcut" data-reactid="97">shift</span> + <span class="shortcut" data-reactid="100">ctrl</span> + <span class="shortcut" data-reactid="102">S</span> on Windows to open the Debugger. </p><p data-reactid="105">The Debugger is divided into three panes:</p><div class="img-caption " data-reactid="106"><img class="img-caption__img" src="/playground/static/overview.98a2002a.png" alt="overview" data-reactid="107"/><span class="img-caption__text" data-reactid="108">An overview of the Firefox Debugger Panel</span></div><p data-reactid="109"><ul class="list" data-reactid="110"><li data-reactid="111">The <strong data-reactid="113">source list pane</strong> shows all the JavaScript files related to the current page or project.</li><li data-reactid="115">The <strong data-reactid="117">source pane</strong> shows the content of those files.</li><li data-reactid="119">The <strong data-reactid="121">tool pane</strong> contains info and tools.</li></ul></p><p data-reactid="123">The tool pane can be broken down into five sections:</p><div class="img-caption " data-reactid="124"><img class="img-caption__img" src="/playground/static/tools.b39842b6.png" alt="tools" data-reactid="125"/><span class="img-caption__text" data-reactid="126">All of the tools available in the tools pane</span></div><p data-reactid="127"><ul class="list" data-reactid="128"><li data-reactid="129">The <strong data-reactid="131">toolbar</strong> has buttons that control the debugger’s movement through the script.</li><li data-reactid="133">The <strong data-reactid="135">watch expressions</strong> section allows us to watch expressions as executions are paused.</li><li data-reactid="137">The <strong data-reactid="139">breakpoints</strong> section displays all of the breakpoints that have been set. Next to each breakpoint is a checkbox to enable or disable that breakpoint.</li><li data-reactid="141">The <strong data-reactid="143">call stack </strong>section displays each level of the call stack, as well as the function name, filename, and line number.</li><li data-reactid="145">The <strong data-reactid="147">scopes</strong> section displays all objects that are in scope.</li></ul></p><p data-reactid="149">Don’t worry if you don’t understand what all of these terms and symbols mean. We’ll cover them in the following sections. Just take note of where things are so that you can follow along.</p><p data-reactid="150">Now that we’ve reviewed the Debugger interface, let’s use it to fix a broken to-do app.</p></div></div></div><div data-reactid="151"><div class="homework" data-reactid="152"><div class="container" data-reactid="153"><img class="homework__logo" alt="Firefox Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACqCAMAAAAUYRQDAAADAFBMVEVHcEz/ywz/zg3RD1/ZFVb9wRLSEVvJVlTaHlHTEVz/xRHFDWbmI0PGCGzGCmzYE1f4NS7/2BDnHkT/5Qn/vA34Ni0Fde8BePXvIT3KCmj/0xz/7AD/qAkQZdv/jQf/Wxn/0Bz/qgPvHz/TElr/aBH/Ux3DC2wCfvEjOrHjTEr/OCUKVtsAj/cnNaj/xQf/lxIAb/MhPrUpNar/1QD/8U//KSz/70z/ngD/7Ur5IzT/MigAgv/9JTD/LSr/kgD/ZhH/Whb/OiT/6kf/Nib/YhQAfv37JDL/owH/fAjrHEP3Ijf/Ji3/gQX0IDr/VRj/5ED/dwr/50T/jgD/mAD/ag//sgH/rAD/PiP/rwH/bw7/qQDoGkgAe/r/cwwAi/v/mgH/pgD/tQD/Uhr/hgT/igL/6wHkGEsAZuwAdvf/TBz/XhX/TxvgFlAAYegAa+//4DwAh/7vHkD/SR7cFFQXR8MOT9BKFHUDW+ITS8oKU9YbQ73/vgAHV9zxHz3/lQD/RCD/ugAfP7fVEFz/0wAAcvUsMqMwLZz/3DcAm/P/wgD/QiH/QCIjOrD/zQAAb/IAj/knNqr/2QEAl/bRDmHZEln/Rh/NDGb/3gE1KJTKCW4AoPL/2TP/5QAAk/f/xwD/1S87I4v/0SpAHoRFE3n/zCUAo+7/6ABEGX3/xh//4gD/txD/wBf+bBYyFGr+eRPdIUT/kBHUH0f/hBIAluQDhuQAkvn/6yz/8gDmIkEEc+HudCEfIoDxSSL/6RXgPirhTyPHIUjVPiwlF3L1VSPpPSn0PCkDSsQAZNnxYSAaMJn/7ztuKWUmJ5DnUj3dSU8DV8r1hhSWgFbpYjSfGlYONqJ8PVcXKYsmfsv3mQnkkRgEQrrt4BCbRFUXOawIP67JlSs7b60sIHmuIkJONYIVpNCyckLOeST/pBuxjECUsFbVPWBMkaNbZ5KrVzQ2SJpVHmfxrw/SriV+a2WEV0ywx0JzZ3nN1StdUW9+k3jQXypsuoRLNF3f1hviphM4sLToxw9ctthqAAAANHRSTlMAESGbJG1NBxI2UWR+v/PpZ4m0wjCVOF/SfbPmvxqfQN7Y6tDSVN2cVPHZwMuQ7+7evt/2u3H8ugAAGgVJREFUeNrN3QlcVWX6B3ASZBMTt1LbJmtsPi1T8/9baJZbGGrmAl68YA5cAXVMYMw1UbrmUpQwWqZWDm1mCoQLxKa44IJbKSkipqnjuOW+a8vM/N7lnOee+557L/DJ4ncuio5++n6e533es9xb4/Wbxq+BV/1P06b13xhY2KbeGxvcVXhXfe+3X/PChML63u+GhdsSEup5KVvcVdq+IKGer8rmhdvad0hIKAys15Nd2r49SlmfZ+e2uwoL2iOlCYXN/ertNl6YsI0hn0rAhNfbLTIB3WbZBmXDeltIdFtTJgTW00Ki2yxyeFr8bmeUe+644447efDNPff4GQpZKom/14hDd+dDDz36xEsv9ej0d+SvyD/+8c9HH33ooTvvuIePdgK6/fspme+JjBE9RDr16NSJOZnyq6/eeeeDD95889GH7mxYqHWblM1J2eCWNv+OOx95Imk6z4gRqCOUHCkq+c933nnnzTc/QK5hVjrARtkG5W1aI+6u+7T7exYmJiUlDU/KyOBGjiTjV9zIkf+BkZakogy03V1XY1BLt12+85EJicMTE4cPTyKkQyFhBJIZkR8JSXmqVCr97rda69jv4N7N3BTxoXETEBglcgQhqZDC+Pnnn6PbNDeUAqEMjIy03Vsno0/bF10h/f70yLjJr06eLJBJAqkWUkd+8J/FCTQ3hpZz5b3WSKulTqVsNmVKK1fEiePGjSOk2m2nQqLbAqmmQ2nzBn73R0Za7XVZlQG9Ro9uazY5f/rLxIkTYQQSRhVJo03dvsKQT7U3TUHzwLBoVNIeWHtjs9FQBqhr8S9jJ46VyAmENOs2Gf/9HUNKlNry+dZYhrz/ttpuPq169Soa/WKw80Q/NnXSpLEekGq3sQHJ4VYGnCtLbdFWiy2taW0nu9fgol5FU5o5dfr/JhFSmRu128KIJUlIlcn3InukxWb/c+1mx6fV4CJkdNtgQxlnTZ0qkercvERI6rZEniKkGRPOghSrzZ55t19tkN6DhxUNZsqiAIcyzpo1S0e+SkicFTNGjCjOh1FFwoi5cVdJkYJMmz0ls2FtCrls2LIiFmq432OzZ882QyZlFJ+pOHnyUHV19cnTQCpLErlGSFMir2UmkH9uUIvz4WCpRP4oWv2X2TNUJDvdHK6o7pyaGhERE1J9o4rmhpYkhvtnQipEnbktPSUtvea35H4PDFu2DK8iBm3lz1s9Y4Yjcpys5Jkzx+LDwzt35sjT6LY58juOfMpUSIEyM73GDQ8YtWzUMmZkKWoG48yZzkgMzoSxx+LiYAxnlYypPs2u1FwiEUIS0VjLaWnpNW54EKqISGdR0GMwakQYgeTGMyV94uJlIWMOVb00QhhdIju4JXbAsW1a5rSaNrzZqBUrlq2QTnyzfcHR7ZUHWK5fPzdrEj8rTj58NbcPCsmNqTCOmM6QCIzmyG1ENI1UBtZstpusGAOlOPBN0aaN3d5+7ZW/vTy0b9euXbfcPHBmKowlPfvIQqLZh6qmM2MP03bnSWQBCU2JrJYF06b9oUZnR98VDlnT++nnnus26O3X3nvlb0P79u06MrTLwIElx66W9GRI2ezqKuyUWJHu213qrogy7QvS5zSt0ZIcoxOLOj75NEe+pVUSyC4Do4b07w8kus0Lue/w9IzpAmlaybxrAvmUO6LmLJj2/zU5O3qvWLFuBfta1vuFZ5999unnunV7+633OBJGVFIgqZA3MpIy6NytbOZ5OOPwbHNJpHTvUDqnuV8NdskV69ax15QXnnzhyWdRSdFtGPvKQgKpFRLIQ8VJScoFhgF5KkEuSjdEUs6Z43mz9G/Cjcs6vvDCC08CadZtIPWxiTicNDzDLfLNHxMWL+aL0rMQGTDH8+z4rGMpev6ZZ4BUuy0LSd0+iWsMd5dqWJP/WYxA2V0hKsbu3bt3KJjvcXYCmHHK8wxJ3QbS2G0am8NGpLoo87AHLWZBvz0S8SOUHmfHF91+sWNHA1LtNhUSV0J00av0myPzriQIZQciqgGRv5Clns47jWDs3RGVNFmSarcjrg5P9HAjBiQWJU+BZyLPgDmBHpArpvQGUl2Spt3ufCyRkB76jXRwJSQiT4GHbSjoxRcJSRuQebcj4kIPD3f/cED0WyILXBMpA3DMb+h2SY4G0tWSVHbyiP6hx9w/ZoEyj833woVcue0pT0QI8TXA3TYU0HbKFM9LkmZ7YOjAqxkeHljlIdegZMxSj1XEgXQvaOjmfnuKAelyScqdPDw0NCfnzPQMKF09+kPy8vN+BJJFNJyEKhFGvNyVsuXo0VOc5mYQkNouqS7JkUBGXSoGEUhEfYjKkHn5//55ocw20yKSkhsRl6X07dVr9BSTuTFeAenI1IieHDmkpOLM4aqqYv5ImpCy4Uh+Xj5KKVLa3TWRAqqLUvq1IqSbuaElGdEfv5cTlZuL31m5q/rQyYobp6t6KEr0G6tyoaZ0TTQw+5mXMqgXRxqH23xu4gUySiJzV65cjsSEhEVfuHijCkhSMmZ+ft7phUuXLmXIpQWmRINvQL9+/br/wc/0selgPElzOdwjnZCdgczhyCFAMmUqkLGRFvvFfGdlHpRXoEQ0pSokIwJocqDpwxUzpBxudW4ImSuQCCrJHj1ViYaTEqXM//d3S2WgdE/EF9K9jUkhRw0DUuxAz9AO5Hq4UxVkiEBeyO/krMyD8selpFSWokJEkluYFJKQtAMpJ8X+ChJKhpRr0op2v8SRpAQzHzm1UEPOL3C1FCnJ/bo3VQo5ZhiQ7nYgdbglkiopkDcw4I5KMIXyGnikNF2KZExO7qfsQkEwekRGmSGpkidCYqOttgtVPYxKFBMBsupnhmTS+VAaiUYhjKyUgc63NqOAdLtNqjtQTJShkhExGG6r7fT0HqQkZj5y+jvweEipEiEEERngNDqNRgFJe7nHbZIPd0guQ9JGyXegG0lAQmksJpqen1/sqJxTSkvRIOwniFzawHgj6w6pbpPhAolzN86LYp+Ue/mN4Un8HE5KnQlk8env5pOyn1pFiRN5w3jWCZg7psZI2iZjUkOBZP0Wwx0WdvLw8MTpQJJSMBET5fxk06WYrBmTBzQ37D9jPFeyi4oMGcKQUQIZsa/icGJiedKIEaQ0Mv+aX1xcfPpn8PiBVwGa7bwUyYjDod9+TcZQJTvWAhmP+gpkePWlqgkTysvxNENVgimSD2bVtflztEwrVZYiARHHfvvObWKGfM4jMiQKlcRVUNzxqzsnTC4vT8R7EaQkpnD+HUcxlFdYIfHiSVaJUogkt3HodpNmo1wgTU/dhFzOCtkTxMmTJ5dPYO/PZ6hKcuJgLT+l1xLWN2BUiEKJn26jTdL7gToiQ3JzhpRcnfgqUp6IezJSEpOcLJ2KkYvU8DlzPuxnbDTlww/fCNS7/YDvGI9I83aHdY46NnXcznE7X2XvmBiVxCRoJ6YsLz4cNg08HFz5CRHxIiKQyU31bvt6j6rbmoTy2ObNm8ftlO8rk5KKyZiAUkYUFw+vCEmHD0oEzDeISEKWN9po3fb2r+N0wxhWwZB4U8eoNBbTWM4excXlVRc6p3GldDIfEyaTkSdZu8gICMBePqYOZ5wIVskzm8fiHRMnJRWTnFTQEdgGTkWH2+HT86Fjn7V8hFcLifRqXVtkvECilLGXNmNsDEoqJlWTOSnF5eVV30XEWzRhOr4+SqYa4gUeOz7SJsff6wHPyK6ukBX7J45zo6RqkrQTkOWnpoXHR+tK5BMqozSyfNhQ34JcI992c7PIFyVDGpXUcjB1J0lxAHk6wRIeHiuF09jBlCSEkYWNN++47+uvzx1Tm+tJ+U6YrORYo5KKSUw4IaWUI9cWhnQOj+U+OEUtdaKWTz5s4xV4N0O2JmRNbh+4Mzx1V0QMq+RVIFUlMckJqEZl/b5RmJka0Tla+KSSqiiNH33UvMHjj7MJ9+ZIusdRbsSoklu2rBU5cPnypeqQfdX7zn0/aaK5UjLJScko31l+OGFxNK72IjVhJo5FMJKQ5aM/3L388QbsilcglbtF5ZZ2y9r169euZ8bKrXtmHpxxqfrY1YMHJ40lpSlzunBONyB37vy5MB17WISFkJmopSaEUTCXrzyBRelz+7sq0vjkjyO3rEe4ccOBrTO2bt265+C54+cYUlEamQQVVhxAvnqlcLE1BLEzYSaMLJ9IIg6eRYuADMQ+OY8j2XirTzDo5L0BRCB5FoCI98BnHzzHkVI5TiipmGCSU2K5lyNvFCakh4WFhYSkpGtERBolEYdANnrXBKlslBsEcc3atatRyB07ZgKJD7gcPDh1EimVYhqdRE1Euw8nJCy0xsaGhcVmUtIyASQisjz3REMMNyHRbxePzLlxzRpmXD20cseOHTOA5Er5gQKjEkzFCSkOEPHDcIbEe8yZsdFgWh2MaYtIiC8N6Y12027uYg9aw4hr16xGNgzdzgqpKacKpXsmoKBSgNy8Ex9zmR8ZGR0dHWsXQpFFkigDJDb0xkC+PsbVRinGezWMyEYN6UFJTHISFsfwnbh4Ym+E2yMjmTNNVFGEGUm5MudEGy+/dvN4vyXS/L2mNesZkRuHvtyXVXKmKyUxhZOgFIG8gs9Mp1utVigtAIqkpKQs0YFLFi1ZsjInq42X/+0POO1B6lPU1WukEUHvD+zYscBEScUkpnSSNREHfmTIU0AutVgszGnXjYgDcRGQ2U2xTbae52m8N4IojHyK1n4MpJOSiklMcgopBcj9HLk4xcKZFo2I2LMlkSc3d0lDr4B2voQ0n5xXNjLjptWrtYvLyh0LjEoqpmQanSp18/79+08V4q3bTIuNM+0gSqM9BUAQBTNn5aKGXr6NA2i8zSfnvY3MuGkTuBwZuuWoqRIxKCWToBQdOc2GMCZ4acKIUkoikpWzfFGgV6NGPubjTSfGt0BkRuxG8n7n5qcLpFJtOZjkFFCFOpkj2VvM82HkTLsoo8gSPSdCTywBMgBI88mRi/K9Tcz4tuMz/qibR6Hk06MUk5jSSVDK/u+/B5K9ZWInJSNypi2b+bKXZGcDmZXdwsvX32fePEKanXNABFJetYmLtv7Hj8KoKokpnQSVWn68CuT3VxhyYZpNKrmPE3HoyOU52fiYnQ/m29XkPKsh2U9szHXkkLgSQy0VJpWToJRx3yMXF7M3djJtWuwaEgEQL3ytXJmN21o/7JSmk0M7ZTcszUGi27j8xYVlVFT/PvHHrwulWkzJlE6SUibCuOfnhQakRSciWSDy5J7I5rcP/u2ApHOOslMK5Fs0Nuw2AncQ8WePOioRjpx17tysqQJJTkAdqZv37Nlzbs5SlnSbHjJabNkiWblZ2eIpRjsPi5IhnbrNb8c6Hz86k5gwzj53teLQLxcuXPjlUMWZqWMnaU4ppezfs+f76/z5OUcKGv2MHYkLs7NPLM/OFne1jee5W5TdgDR2G4UEkimrLx+dqRlnHL106IKNrXq2m2SmXbwEJu+7Sj2ISlYsnM9ClbQQ0WLNghHHiRNZ2YEc6f0+R6o7pSyljtQLSe+L7Tp2+frRo0evXzpWHYtLBavFIvqGrTnz4plJCEEpe5BDSwkpbLoRSBtHZp3IyspqwJGtGVLZKanfgxiSlqTTG2MxMfv27QuLjUaAJCWrZgWEGhRUTTtpz9Y9W/87nz9ETbdIGaITkSwYee7348hG77vrNyslPSUgJC8llPIZIG4DSGnnShSzYirPJGMO4i7uOowsQFqcYuVImex75SMrUyT1W0U6lBK1lMpYl0opZQfPHtzIndSQZkQsHGm02cXcYKN8n07far+BpBsy/TklfTzRoBRIqUzDcWYqNianbN27de9/5RPUTAeeTkQs3GiRSxJpDCRtQup+riPFgyunUlLDoYw0KHkpZyGAskP8MBvGS8zIvtIkkMKN0eDht7Po38TzVvtt3M+pkiN5v/U3vl00nJSZJ2dhjzdm6969ey8CyJNiVYkwRluzLOxlawqfnBxtE6J+G0dHrMm+Qzfwp0I5OcbPo5oqIUQyL82aLQKs5MJ4HU/SBNLu6MNLGIG0ZFlZWsAnJ4f6bT46+v03y5bQHARvfBKT7UQGpd32y8ljh375pYLv8zBSZgB5SH/gZzPUUBCR2EheXgs2IBm/doZ+K6ND0y2VSElOCXure9fKuF3caWBaIk9eXwXLkVVbgUQg1a07UMh0LZkWhciNsZG8shbMthZv3m/T0aFbHfm85euvN3wtnVtKSnJLcnexLN+1fPk+FkCjY4/9tEpmpjRSZu5dteqijkwzJSLRYn7EbNOidDM6dIGBs/fXIt9+u+VbQBFId0kpoDEhxwVxB74WzOSZ4WDdu2pvhf58Kj1FrEMiSmNYNPulFbOtxwc7pTo6tAtRKdl8b/j6m280KFLybQnPrhIOPV55ZNWRI7hTQ2DEiwIu6D+lcR9/2UhIRBiBZOdZw8cwGot+q6OjlhLjPXLDNzIalayXj5Th+HjBxyBKKA5Srlp15GImxamMsZIIJDOKsaF+uxkdlFJeB9EHADccWPfDD9/gENZvhPVm5ZdlZSDKkFPHYgmczEzTkplCRINRIsXYUL/lVqmMDg04KyU95T/75fntu3f/wMOlPxyoPA8iyvipJPKvBYbsKFt1GUY9NnUxyuBX0exfC1X67aKU9JhAbziUlWVfIuPPb+c5z4BlX+L1KcvHgFLICmOKFhhTrAIoQ8SQMHipkNRvGh2XpdQbDuWW819SwBM/ffHFp18AKaFUUfFN2apK3Lmm6LETkNdRChGGdC4k7sY8l5Jmhzd87fnPhJDy2RfIp3iR0zFlZZUX7DKcajEQySguV7RCUrzdlpK2IdlwqRw/frz0jR//2fgvxkPJQkyiMuNlm92QSBKyaEQERn20KQFidLRSKnul2nAotzMlBVBGVaA8R8rKzjo9BrDEkhCBUA++D/RS09iklHTaMcyOrtxS6axENXGQk6RlPx2y8/sYiu4jY5iuxMlGjS+QtKFTKWl2DA0XHybocnY8mGo5Zd+Jilb/ggseKAlqNQgd6hgTgtxHNLWUQBpKqTScliWUUTe3f0ZMqicvKaXsp+P8chGx6CGhiEaMYcjcP3qZl1JdlersOG7pXBl1VjJVKL4+E8Sz+6zRkQh3Smp0GPNRpBBhH97qG2yK9HNclcNMS6kuSyiHgDkeTlMm/ocvQYyMljfmJI0UNNq+NSESk9r1ZaqksirNS0kNp2WpK/G0csjNA3CqUPzW+crj+6JjUTQkWocisU5CIgKZ89bLWJOeS6nOjnY5ZFTKW9whN89WAkphwO2Xj1dzA0JOFt1I8wKhSGpMz0GDhrbwMk8ArUrz2dGXpVGp3Yn3LLl59kBl5XaksvLA2ePVEWJSkTBycmlsCPnEvqMTUyPi8WDnQZwTzeOtlLLmSu2BAcLvecQ/D60DUzoJChb5RKQQ6fzKk0+/fK8pkK7YjNuQ0nA5PCZKxoQzjinhxB25ZJJTJkSJJkS6PvPk033oxK2kNZBmDa+5EkwonZhwEkchxrCZ0YSdU3PwD+uCD15QlNnx0HDsljTipkpjMYmJ6CrG4t/okY3GH+//fMfnu6aadpuuMzjSpOG0LMWZR1UaimlgwklQySIfC4A8qX069u49Mjz+PndIv9aylIaG68uShkdRGotJTHK6CYgicZum9M6Jj1evLtSGv2vWcFVJ65Jabug5MeHkUDMt7zOCPxm/afSm/vFxcVTImjRcVT7rSkktJ6biNA98TMiMG+Li+sRhRXpII5OGe1RSy2XPFSagWhQjgCxxq1FG/C1s5B7j7dRwWpaqku/qcmFSMY1McgJqFg5EtuTExeGvrKRmu12W1HBalqoSTKGklqtMWU4BJavmxTccyHlxffBXaB93G592psuSNiKplGdIOeRUTJUpnYCqiedABEIklxakp+GRDTcfHlLSwqRiEpNGCE4dihiMOhDBn7/Xz6uG8UUpaVlieGqoNGfCKaAkpYCnAZEhZPScRsZlaVQiRqVsuSymkUlOTYoXpY/0IezPwliLtFaVL7pQKsUkpsFJUiosfBoQ6R9EgFoo55op6dxjLKYpk5yAOlN7DtHC/lgO7mtqq6ThUZTqwuTFlD0nJjk5VEopQifzYAuv2qfRPMOIu1NqxUTPVSacBOVSie2v8dgfGdgS55m6KNmnMzwp1WISk5wCSlJmHQKcngfR6rrF9/Z3TZUdFSUVk5jkJChRObGLyMCclv5edU7AA5pymEEphpxaTmOuMMnJoGQFUM+DdLauS/wbK0p5hjQvppFJTgklapdQPXXvNF2qe1I691wyqZxwSihJQ0fKhD4YTPt33ePb5HVVSeNjKCZ6rjF5OeEkKJcK7Miu8vceDPb3+lXi01gqR5FSLSYxedO1cpKTqCCKbDCZl7q3vMlc2tVJaSwmMQcRk5wOUvGLvmvWtYPx10tA47lzSdkLStlyY8+JybtOTkAhleHfrl6/bvftvr+Wj4oplbQwjcVUmcJJUB7289/WrNu9e/f7jX41HhWTlMaWq0zVCSikPK+sWfev3ci6IK9bkEZNxsw1KKmYLpjk1KCrhRDEjS29bkn8vZuIWmJhmhYTTBohB6eEblwvgP9at371y8Fetyo+3nNHKS03ZZJTQN/etP5fPOvXbMR7Aw/TWeaWMJuMkkoDE0qFSU4G7cYK+h7y2nuvtfS5NTpiBuG/9aCsTGcmOamgsqZvoYy3Pv6Nmo0arBSTmAanhFJJH8bJ+rdJQFArILViElNxElTkYZysf7v4+Xo3YUhXTHIS9OGW93n91vEPCGrWFkZEYZJTQpmQivgbQ32DmrXCf7NbpDcCJjmFsmOrlsE+fr/z/xuTj29Qy2at2o4GEj45QcjzvR9u1axl8H0K8Pej+vsE+AYHB7Vs1bZtq5ZBwcF/vC/A51dp8P8AwyOfzsw1jBkAAAAASUVORK5CYII=" data-reactid="154"/><h2 class="homework__title" data-reactid="155">Firefox DevTools: Hot Tip</h2><div class="row" data-reactid="156"><div class="homework__content" data-reactid="157"><p data-reactid="158">Sometimes JavaScript code will be “minified” so that the file size is smaller and faster to load. This is great for your users, but it can make the code impossible to read in the Debugger. Thankfully, Firefox has a great option for viewing minified code. When you view a minified file in the source pane, an icon will appear at the bottom. After clicking this icon, Debugger will format the code into something that is human-readable, and display it as a new file in the source pane.</p><p data-reactid="159">Give it a try! The link below will bring you to a to-do app that is using a minified JavaScript file. Simply:</p><ol class="list" data-reactid="160"><li data-reactid="161"><a href="https://mozilladevelopers.github.io/sample-todo/minified/" target="_blank" rel="noopener noreferrer" data-reactid="162">Visit this Link</a></li><li data-reactid="163">Open Debugger (<span class="shortcut" data-reactid="165">option</span> + <span class="shortcut" data-reactid="168">command</span> + <span class="shortcut" data-reactid="170">S</span> on Mac or <span class="shortcut" data-reactid="173">shift</span> + <span class="shortcut" data-reactid="175">control</span> + <span class="shortcut" data-reactid="178">S</span> on Windows)</li><li data-reactid="180">Find and click on app.js in the source list pane</li><li data-reactid="181">Locate and click on the format icon</li></ol></div></div></div></div></div></div><div class="bottom-nav" data-reactid="182"><div class="container" data-reactid="183"><div class="bottom-nav__item bottom-nav__item--left" data-reactid="184"></div><div class="bottom-nav__item bottom-nav__item--right" data-reactid="185"><a href="/playground/debugger/02-check-variable-values/" data-reactid="186"><div class="bottom-nav__inner" data-reactid="187"><span class="bottom-nav__lead" data-reactid="188">Next</span><span class="bottom-nav__title" data-reactid="189">Check Values</span></div></a></div></div></div></div><div class="cta" data-reactid="190"><div class="container" data-reactid="191"><div class="cta__content" data-reactid="192"><div class="cta__logo" data-reactid="193"><img src="/playground/static/ffde-logo.0a69ffe8.png" alt="Firefox Developer Edition Logo" data-reactid="194"/></div><span class="cta__text" data-reactid="195">Get the browser with the best tools for Developers</span><div class="cta__download" data-reactid="196"><a href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&utm_medium=referral&utm_content=bottom-cta" target="_blank" rel="noopener noreferrer" data-reactid="197"><button class="download-white" data-reactid="198"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTEgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0xQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxMi4wMDAwMDAsIC00Mi4wMDAwMDApIiBmaWxsPSIjMzA2RkZEIj4KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTMuMDAwMDAwLCAtNTgzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmtzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgzLjAwMDAwMCwgNjEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4zMjA0NDIsIDIwLjI0NDg1Mikgc2NhbGUoLTEsIC0xKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjMyMDQ0MiwgLTIwLjI0NDg1MikgdHJhbnNsYXRlKDEwLjgyMDQ0MiwgMTUuMjQ0ODUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNDYyNTM3MSw1LjYwMTg0ODQxIEMxMC43OTQ4NzY0LDUuMjU5NDA1OTYgMTAuNzkxMjg4OSw0LjcwNDA1Nzk5IDEwLjQ1ODYyMzQsNC4zNjE2MTU1NCBMNi41MDgwNTc0NCwwLjMwOTc2NzQ2OSBDNS41ODU3MjYwMywtMC42Mjk1NDExOTEgNC4yMDE5MDI3NiwwLjc3OTQyMTggNS4xMjQ1NjAzMiwxLjcxODczMDQ2IEw2Ljg0ODIyNDIzLDMuNDc0MTIxNjUgQzcuMTM0OTAzNjIsMy43NjYwNzc5MSA3LjAzOTM0MzgyLDQuMDAzNTYyMjQgNi42MzY1NTc2NSw0LjAwMzU2MjI0IEwwLjk3ODQyNzk1Miw0LjAwMzU2MjI0IEMwLjQzODAwOTU4LDQuMDAzNTYyMjQgMy41NTI3MTM2OGUtMTQsNC40NDk5NjYzNiAzLjU1MjcxMzY4ZS0xNCw1IEMzLjU1MjcxMzY4ZS0xNCw1LjU1MDAzMzY0IDAuNDM4MDA5NTgsNS45OTY0Mzc3NiAwLjk3ODQyNzk1Miw1Ljk5NjQzNzc2IEw2LjYzNjU1NzY1LDUuOTk2NDM3NzYgQzcuMDQwNjQ4MzksNS45OTY0Mzc3NiA3LjEzNzE4NjYyLDYuMjMyNTkzNTEgNi44NDgyMjQyMyw2LjUyNzIwNjk0IEw1LjEyNDU2MDMyLDguMjgxMjY5NTQgQzQuMjAxOTAyNzYsOS4yMjA1NzgyIDUuNTg1NzI2MDMsMTAuNjI5NTQxMiA2LjUwODA1NzQ0LDkuNjkwMjMyNTMgTDEwLjQ2MjUzNzEsNS42MDE4NDg0MSBaIiBpZD0iUGFnZS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjM1NDk4MiwgNS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTUuMzU0OTgyLCAtNS4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="download arrow" data-reactid="199"/>Firefox Developer Edition</button></a></div></div></div></div><footer class="footer" data-reactid="201"><div class="container" data-reactid="202"><div class="row" data-reactid="203"><div class="col-md-4" data-reactid="204"><img class="footer__logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzguNSAxODUuNSI+CiAgPHN0eWxlPgogICAgLnN0MHtmaWxsOiNGRkZGRkY7fQogIDwvc3R5bGU+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTUwMy41IDExNy4yYzAgNC45IDIuNCA4LjggOSA4LjggNy44IDAgMTYuMS01LjYgMTYuNi0xOC4zLTMuNi0uNi03LjMtLjktMTEtMS03LjggMC0xNC42IDIuMi0xNC42IDEwLjV6Ii8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTAgMHYxODUuNWg1NzguNVYwSDB6bTE2My44IDEzOS45aC0zMnYtNDNjMC0xMy4yLTQuNC0xOC4zLTEzLjEtMTguMy0xMC41IDAtMTQuOCA3LjUtMTQuOCAxOC4xdjI2LjZIMTE0VjE0MEg4MlY5Ni45YzAtMTMuMi00LjQtMTguMy0xMy4xLTE4LjMtMTAuNSAwLTE0LjggNy41LTE0LjggMTguMXYyNi42aDE0LjVWMTQwSDIyLjJ2LTE2LjZoMTAuMlY4MC4xaC0xMVY2My41aDMyLjlWNzVjNC42LTguMSAxMi41LTEzIDIzLjItMTMgMTEgMCAyMS4yIDUuMyAyNC45IDE2LjUgNC4yLTEwLjIgMTIuOS0xNi41IDI0LjktMTYuNSAxMy43IDAgMjYuMyA4LjMgMjYuMyAyNi41djM0LjloMTAuMnYxNi41em00OC42IDEuN2MtMjMuNiAwLTM5LjgtMTQuNC0zOS44LTM4LjggMC0yMi40IDEzLjYtNDAuOSA0MS00MC45czQwLjkgMTguNSA0MC45IDM5LjhjMCAyNC41LTE3LjcgMzkuOS00Mi4xIDM5Ljl6bTEyMS43LTEuN2gtNjYuOGwtMi4yLTExLjUgNDItNDguM2gtMjMuOUwyNzkuOCA5MiAyNjQgOTAuM2wyLjctMjYuOEgzMzRsMS43IDExLjUtNDIuNCA0OC4zSDMxOGwzLjYtMTEuOSAxNy4zIDEuNy00LjggMjYuOHptNDEuNCAwaC0yMi45di0yNy41aDIyLjl2MjcuNXptMC00OWgtMjIuOVY2My41aDIyLjl2MjcuNHptMTIgNDlsMzMuMS0xMTYuNmgyMS41TDQwOSAxMzkuOWgtMjEuNXptNDQuNCAwTDQ2NSAyMy4zaDIxLjVsLTMzIDExNi42aC0yMS42em0xMTMuOSAxLjdjLTEwLjIgMC0xNS44LTUuOS0xNi44LTE1LjMtNC40IDcuOC0xMi4yIDE1LjMtMjQuNiAxNS4zLTExIDAtMjMuNi01LjktMjMuNi0yMS45IDAtMTguOCAxOC4xLTIzLjIgMzUuNi0yMy4yIDQuMiAwIDguNC4yIDEyLjUuN3YtMi41YzAtNy44LS4yLTE3LjEtMTIuNS0xNy4xLTQuNiAwLTguMS4zLTExLjcgMi4yTDUwMiA5MC42bC0xNy41LTEuOSAzLjQtMTkuOGMxMy40LTUuNCAyMC4yLTcgMzIuNy03IDE2LjUgMCAzMC4zIDguNSAzMC4zIDI1LjlWMTIxYzAgNC40IDEuNyA1LjkgNS4zIDUuOSAxLjEgMCAyLjItLjIgMy4yLS41bC4yIDExLjVjLTQuMiAyLjQtOC45IDMuNy0xMy44IDMuN3oiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjEzLjMgNzguN2MtMTEuMiAwLTE4LjEgOC4zLTE4LjEgMjIuNyAwIDEzLjIgNi4xIDIzLjQgMTggMjMuNCAxMS40IDAgMTguOC05LjIgMTguOC0yMy43LS4xLTE1LjQtOC40LTIyLjQtMTguNy0yMi40eiIvPgo8L3N2Zz4K" alt="Mozilla Logo" data-reactid="205"/></div><div class="col-md-4" data-reactid="206"><span class="footer__header" data-reactid="207">Community & Resources</span><ul class="footer__list" data-reactid="208"><li data-reactid="209"><a href="http://github.com/mozilladevelopers/playground/" rel="noopener noreferrer" target="_blank" data-reactid="210">Contribute on Github</a></li><li data-reactid="211"><a href="https://twitter.com/FirefoxDevTools" rel="noopener noreferrer" target="_blank" data-reactid="212">Firefox DevTools Twitter</a></li><li data-reactid="213"><a href="https://devtools-html-slack.herokuapp.com/" rel="noopener noreferrer" target="_blank" data-reactid="214">Firefox DevTools Slack Channel</a></li><li data-reactid="215"><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout" rel="noopener noreferrer" target="_blank" data-reactid="216">MDN</a></li></ul></div><div class="col-md-4" data-reactid="217"><span class="footer__header" data-reactid="218">Mozilla</span><ul class="footer__list" data-reactid="219"><li data-reactid="220"><a href="https://www.mozilla.org/about/" rel="noopener noreferrer" target="_blank" data-reactid="221">About</a></li><li data-reactid="222"><a href="https://www.mozilla.org/contact/" rel="noopener noreferrer" target="_blank" data-reactid="223">Contact Us</a></li><li data-reactid="224"><a href="https://donate.mozilla.org/?presets=100,50,25,15&amount=50" rel="noopener noreferrer" target="_blank" data-reactid="225">Donate</a></li></ul></div></div><hr class="footer__div" data-reactid="226"/><ul class="footer__legal" data-reactid="227"><li data-reactid="228"><a href="https://www.mozilla.org/privacy/" rel="noopener noreferrer" target="_blank" data-reactid="229">Privacy</a></li><li data-reactid="230"><a href="https://www.mozilla.org/privacy/websites/#cookies" rel="noopener noreferrer" target="_blank" data-reactid="231">Cookies</a></li><li data-reactid="232"><a href="https://www.mozilla.org/legal/" rel="noopener noreferrer" target="_blank" data-reactid="233">Legal</a></li></ul></div></footer></div></div><script id="webpack-manifest">/*<![CDATA[*/window.webpackManifest={"231608221292675":"app-8f1ccff5c7a42d45471a.js","37651121599412":"component---src-pages-02-first-grid-js-566332769f76156521e4.js","166692331054057":"component---src-pages-03-firefox-devtools-js-4d49d9fbe949f44c051f.js","94085081834145":"component---src-pages-04-fr-unit-js-48d7c38e90190513a02c.js","47944494456262":"component---src-pages-05-mixing-units-js-5d3d758d0a830ea83032.js","55616705441138":"component---src-pages-06-position-items-js-fb920db7e7ddc66df489.js","48774483122690":"component---src-pages-07-basic-layout-js-2b4af9229644eb459218.js","210113615180907":"component---src-pages-08-template-areas-js-86417ed2a38587f32a93.js","26549370073863":"component---src-pages-09-named-lines-js-b5e6d21268d5a7c59914.js","9384344114300":"component---src-pages-10-learn-more-js-abc969c8b5d8e9f33383.js","162898551421021":"component---src-pages-404-js-e32ee3bf13f415e6dd85.js","35783957827783":"component---src-pages-index-js-60ad6e49edd1f1f74531.js","234804948918196":"component---src-pages-css-grid-02-first-grid-js-662a4d70bdacbc5f5c74.js","270958380025928":"component---src-pages-css-grid-03-firefox-devtools-js-7889d2c46194053d051a.js","245946605849590":"component---src-pages-css-grid-04-fr-unit-js-73d7304e90a1b1d31f0a.js","22364465788215":"component---src-pages-css-grid-05-mixing-units-js-eb1a7d094b5868ef6804.js","177315466596493":"component---src-pages-css-grid-06-position-items-js-7c4ffa3b057a0461bcb0.js","259628375151980":"component---src-pages-css-grid-07-basic-layout-js-5ffa2b65140c7d08f30e.js","226360589622867":"component---src-pages-css-grid-08-template-areas-js-49e7225dfaf73c47cc1d.js","81692003008797":"component---src-pages-css-grid-09-named-lines-js-e14a834fd64e2bae44bf.js","139762318773600":"component---src-pages-css-grid-10-learn-more-js-1a7925459470d1374a60.js","216809853818397":"component---src-pages-css-grid-index-js-7b07f5d7da5ab790f682.js","270304712061374":"component---src-pages-debugger-02-check-variable-values-js-f149857a96fcc3ce701d.js","200910591484115":"component---src-pages-debugger-03-the-call-stack-js-b4372b69ff564251592e.js","122775117748054":"component---src-pages-debugger-04-conditional-breakpoints-js-8b43fbb01271069acc46.js","124780248285625":"component---src-pages-debugger-05-learn-more-js-61e1d0fa9b92affeaed0.js","136876265974512":"component---src-pages-debugger-index-js-2597034f63dbd6422306.js","60335399758886":"path----557518bd178906f8d58a.js","170993395202698":"path---02-first-grid-a0e39f21c11f6a62c5ab.js","202528526510917":"path---03-firefox-devtools-a0e39f21c11f6a62c5ab.js","21645017057402":"path---04-fr-unit-a0e39f21c11f6a62c5ab.js","276602257718623":"path---05-mixing-units-a0e39f21c11f6a62c5ab.js","97985317976918":"path---06-position-items-a0e39f21c11f6a62c5ab.js","180086047290608":"path---07-basic-layout-a0e39f21c11f6a62c5ab.js","264468362835422":"path---08-template-areas-a0e39f21c11f6a62c5ab.js","221033611934924":"path---09-named-lines-a0e39f21c11f6a62c5ab.js","227726641203895":"path---10-learn-more-a0e39f21c11f6a62c5ab.js","254022195166212":"path---404-a0e39f21c11f6a62c5ab.js","142629428675168":"path---index-a0e39f21c11f6a62c5ab.js","178698757827068":"path---404-html-a0e39f21c11f6a62c5ab.js","123764462342234":"path---css-grid-02-first-grid-a0e39f21c11f6a62c5ab.js","207193594877290":"path---css-grid-03-firefox-devtools-a0e39f21c11f6a62c5ab.js","168672186756039":"path---css-grid-04-fr-unit-a0e39f21c11f6a62c5ab.js","51150815026611":"path---css-grid-05-mixing-units-a0e39f21c11f6a62c5ab.js","192704384712088":"path---css-grid-06-position-items-a0e39f21c11f6a62c5ab.js","7403850988108":"path---css-grid-07-basic-layout-a0e39f21c11f6a62c5ab.js","14025342602699":"path---css-grid-08-template-areas-a0e39f21c11f6a62c5ab.js","206353735991246":"path---css-grid-09-named-lines-a0e39f21c11f6a62c5ab.js","138380857046173":"path---css-grid-10-learn-more-a0e39f21c11f6a62c5ab.js","63463904736412":"path---css-grid-a0e39f21c11f6a62c5ab.js","175301269952765":"path---debugger-02-check-variable-values-a0e39f21c11f6a62c5ab.js","180248409626559":"path---debugger-03-the-call-stack-a0e39f21c11f6a62c5ab.js","200871159611423":"path---debugger-04-conditional-breakpoints-a0e39f21c11f6a62c5ab.js","148027752897441":"path---debugger-05-learn-more-a0e39f21c11f6a62c5ab.js","106222096641952":"path---debugger-a0e39f21c11f6a62c5ab.js","114276838955818":"component---src-layouts-index-js-745ea9f5fcaee4546906.js"}/*]]>*/</script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-35433268-86', 'auto'); </script><script>/*<![CDATA[*/!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",["/playground/commons-801253a49cbae9e30f44.js","/playground/app-8f1ccff5c7a42d45471a.js","/playground/path---debugger-a0e39f21c11f6a62c5ab.js","/playground/component---src-pages-debugger-index-js-2597034f63dbd6422306.js","/playground/component---src-layouts-index-js-745ea9f5fcaee4546906.js"])/*]]>*/</script></body></html>