1

My issue is specifically related to debugging those elements that render on the [root] via the virtual DOM. Most specifically, the materialUI AutoComplete component. I need to style it to fit several color themes, therefore I can't use style:{{color:#eee}} because that would override the default color and replace it by a new one. Instead I need to play around with specificity to make it white, or black, or red, etc, according to the parent theme that I am using.

Anyway, It is impossible for me to inspect it in Chrome Dev Tools because once the mouse leaves the autoComplete input, the dropdown closes and I can't inspect it. Normally, I counter this by using debugger; or The Sources section of Chrome Dev Tools but reactJS scripts compile and bundle through webpack, so they are impossible to access in dev tools as well.

Does anyone know how I can stop a reactJS script at the Autocomplete line in the component class?

class Header extends React.Component {
    render() {

       return (
          <section>
             <div> SOme code here</div>
             //debug somewhere inside the autocomplete below to stop it as it renders
             <AutoComplete 
                  className='search-item'
                  style={{width: '100%'}}
                  hintText="Type anything"
                  filter={AutoComplete.caseInsensitiveFilter}
                  fullWidth={true}
                  dataSource={shortcutsData}
             />
          </section>
       );
    }  
}

The link below shows the non-reactJS way. Which doesn't work for me

How to pause JS script execution at a specific line?

Thanks in advance

Community
  • 1
  • 1
LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • why does not work for you? React is just JS, just make sure you have the devtools/debugger open – Dayan Moreno Leon May 17 '17 at 23:49
  • @DayanMorenoLeon Dude! That's my middle name! Luis Dayan! I've never met another Dayan! HA! Nice to meet you. ANyway, it doesn't work. React throws a compile error when I use debugger :( – LOTUSMS May 18 '17 at 04:24
  • so you are trying to place a debugger inside he jsx? yea that is not going to work :) but if you place it outside the jsx it should work. not sure if doing {debugger} in the jsx is going to take you somewhere though. Pleasure to meet you too btw. :) there aren't many of us Dayan in the world :) – Dayan Moreno Leon May 18 '17 at 05:06
  • Yeah, I couldn't stop the jsx at the spot I want it to stop at. :( Makes it really hard to debug the DOM, ui-wise – LOTUSMS May 18 '17 at 11:59
  • well the problem is that JSX is suggar on top of react JS API so is actually JS. what exactly are your trying to do? – Dayan Moreno Leon May 18 '17 at 14:27
  • @DayanMorenoLeon If you go to the material UI library online and go to the autocomplete, type something in it to make the dropdown open up. Then right click on it to inspect it in the chrome dev tools. You will see it can't be done because it onloads on mouseleave. I need it to stop so I can see how it renders on HTML and use CSS specificity to style it. I can't use the MUIThemes because my app is heavily customized without MUIThemes – LOTUSMS May 18 '17 at 16:13
  • ahh ok, install the react extension and then you will be able to manipulate the component's state and props to control its behavior – Dayan Moreno Leon May 18 '17 at 17:46

1 Answers1

0

You can place a debugger tag anywhere in the js script and it gets paused on runtime, something like this

debugger;

For example, if I have to place it in your code then 

class Header extends React.Component {
 render() {
   debugger;
   return (
      <section>
         <div> SOme code here</div>
         //debug somewhere inside the autocomplete below to stop it as it renders
         <AutoComplete 
              className='search-item'
              style={{width: '100%'}}
              hintText="Type anything"
              filter={AutoComplete.caseInsensitiveFilter}
              fullWidth={true}
              dataSource={shortcutsData}
         />
      </section>
   );
}  
}

And it will get paused there when you run the app.

Hope this helps!

zenwraight
  • 2,002
  • 1
  • 10
  • 14