added console logs

Author: jrosengrant

src/app/components/Diff.tsx

@@ -80,12 +80,15 @@ function Diff(props: DiffProps): JSX.Element {
     return newObj; // return the cleaned state snapshot(s)
   };
 
+  console.log('previousDisplay before stateless cleaning: ', previous);
   const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
-
+  console.log('previousDisplay after stateless cleaning: ', previousDisplay);
   const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
-
+  console.log('delta: ', delta);
   const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
+  console.log('html: ', html);
 
+  console.log(show);
   if (show)
     formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
   else formatters.html.hideUnchanged(); // hides unchanged values

src/app/components/DiffRoute.tsx

@@ -19,7 +19,7 @@ const DiffRoute = (props: DiffRouteProps): JSX.Element => (
       </NavLink>
     </div>
     <Switch>
-      <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} show />} />
+      <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} />} />
       <Route path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
     </Switch>
   </Router>

src/app/components/StateRoute/StateRoute.tsx

@@ -32,7 +32,9 @@ const StateRoute = (props: StateRouteProps) => {
     webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
-
+  console.log('snapshot from StateRoute props: ', snapshot);
+  console.log('snapshots from StateRoute props: ', snapshots);
+  console.log('currLocation from StateRoute props', currLocation);
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
 
@@ -55,7 +57,7 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
   };
 
-  const renderHistory: JSX.Element = () => {
+  const renderHistory = () => {
     if (hierarchy) {
       // if hierarchy was initialized/created render the history
       return (

src/extension/background.js

@@ -205,6 +205,7 @@ chrome.runtime.onConnect.addListener((port) => {
     const { action, payload, tabId } = msg;
 
     switch (action) {
+      // import action comes through when the user uses the "upload" button on the front end to import an existing snapshot tree
       case 'import': // create a snapshot property on tabId and set equal to tabs object
         // may need do something like filter payload from stateless
         console.log('background import action tabsObj: ', tabsObj);
@@ -219,7 +220,9 @@ chrome.runtime.onConnect.addListener((port) => {
 
         return true; // return true so that port remains open
 
+      // emptySnap actions comes through when the user uses the 'clear' button on the front end to clear the snapshot history and move slider back to 0 position
       case 'emptySnap':
+        console.log('tabsObj on clear: ', tabsObj);
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]]; // reset snapshots to page last state recorded
         tabsObj[tabId].hierarchy.children = []; // resets hierarchy
         tabsObj[tabId].hierarchy.stateSnapshot = {