Don't wrap console methods for metro logging in Chrome debugger (#26883)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/26883

This diff fixes an issue reported in https://github.com/facebook/react-native/issues/26788 where logs in the Chrome console were showing a different location than previous versions.

In the change here, we stop wrapping the console functions to attach the metro websocket in any environment that isn't a native app environment. We do this by checking `global.nativeLoggingHook` which is bound only by native apps and not environments like the Chrome DevTools.

Changelog: [General][Fixed] - Fix wrong lines logging in Chrome debugger

Reviewed By: cpojer, gaearon

Differential Revision: D17951707

fbshipit-source-id: f045ea9abaa8aecc6afb8eca7db9842146a3d872

Libraries/Core/setUpDeveloperTools.js

@@ -12,6 +12,10 @@
 
 import Platform from '../Utilities/Platform';
 
+declare var console: typeof console & {
+  _isPolyfilled: boolean,
+};
+
 /**
  * Sets up developer tools for React Native.
  * You can use this module directly, or just require InitializeCore.
@@ -60,8 +64,27 @@ if (__DEV__) {
       JSInspector.registerAgent(require('../JSInspector/NetworkAgent'));
     }
 
+    // Note we can't check if console is "native" because it would appear "native" in JSC and Hermes.
+    // We also can't check any properties that don't exist in the Chrome worker environment.
+    // So we check a navigator property that's set to a particular value ("Netscape") in all real browsers.
+    const isLikelyARealBrowser =
+      global.navigator != null &&
+      /*              _
+       *             | |
+       *   _ __   ___| |_ ___  ___ __ _ _ __   ___
+       *  | '_ \ / _ \ __/ __|/ __/ _` | '_ \ / _ \
+       *  | | | |  __/ |_\__ \ (_| (_| | |_) |  __/
+       *  |_| |_|\___|\__|___/\___\__,_| .__/ \___|
+       *                               | |
+       *                               |_|
+       */
+      global.navigator.appName === 'Netscape'; // Any real browser
+
     if (!Platform.isTesting) {
       const HMRClient = require('../Utilities/HMRClient');
+
+      if (console._isPolyfilled) {
+        // We assume full control over the console and send JavaScript logs to Metro.
         [
           'trace',
           'info',
@@ -79,6 +102,16 @@ if (__DEV__) {
             originalFunction.apply(console, args);
           };
         });
+      } else {
+        // We assume the environment has a real rich console (like Chrome), and don't hijack it to log to Metro.
+        // It's likely the developer is using rich console to debug anyway, and hijacking it would
+        // lose the filenames in console.log calls: https://github.com/facebook/react-native/issues/26788.
+        HMRClient.log('log', [
+          `JavaScript logs will appear in your ${
+            isLikelyARealBrowser ? 'browser' : 'environment'
+          } console`,
+        ]);
+      }
     }
 
     require('./setUpReactRefresh');

Libraries/polyfills/console.js

@@ -569,6 +569,11 @@ if (global.nativeLoggingHook) {
     assert: consoleAssertPolyfill,
   };
 
+  Object.defineProperty(console, '_isPolyfilled', {
+    value: true,
+    enumerable: false,
+  });
+
   // If available, also call the original `console` method since that is
   // sometimes useful. Ex: on OS X, this will let you see rich output in
   // the Safari Web Inspector console.
@@ -620,4 +625,9 @@ if (global.nativeLoggingHook) {
     debug: log,
     table: log,
   };
+
+  Object.defineProperty(console, '_isPolyfilled', {
+    value: true,
+    enumerable: false,
+  });
 }