kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-26 13:25:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement console group APIs (#18555)

Browse Source 
Summary:
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.

React Native provides an implementation of the Web "Console" API, which is a powerful mechanism for debugging and analyzing RN apps. However, one subset of the Console API that RN does not provide is the "grouping" functions, namely `console.group` and `console.groupEnd`. These functions provide a useful way to see how an application behaves within a different parts of an application hierarchy.

I modified the "RNTester" app to create a console group each time an example is tapped, and the group is ended when the "Back" button is tapped. Here is an example of the grouping as seen in the Xcode console.

<img width="651" alt="console grouping" src="https://user-images.githubusercontent.com/445421/37882070-d2ae7860-306d-11e8-8cf4-be843a864f43.png">

https://github.com/facebook/react-native-website/pull/270

[GENERAL] [ENHANCEMENT] [console.js] - Add `console.group()` and `console.groupEnd()` APIs, matching the Web Console API.
Closes https://github.com/facebook/react-native/pull/18555

Differential Revision: D7992131

Pulled By: hramos

fbshipit-source-id: 0d28896292563922240ae2100ed49e35b6d1f102
This commit is contained in:
Andrew Goodale
2018-06-12 11:14:46 -07:00
committed by Facebook Github Bot
parent cc07c9f0a3
commit f7657eaf02
1 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Libraries/polyfills/console.js
View File

@@ -428,6 +428,9 @@ function getNativeLogFunction(level) {
INSPECTOR_FRAMES_TO_SKIP,
);
}
if (groupStack.length) {
str = groupFormat('', str);
}
global.nativeLoggingHook(str, logLevel);
};
}
@@ -501,6 +504,27 @@ function consoleTablePolyfill(rows) {
global.nativeLoggingHook('\n' + table.join('\n'), LOG_LEVELS.info);
}
const GROUP_PAD = '\u2502'; // Box light vertical
const GROUP_OPEN = '\u2510'; // Box light down+left
const GROUP_CLOSE = '\u2518'; // Box light up+left
const groupStack = [];
function groupFormat(prefix, msg) {
// Insert group formatting before the console message
return groupStack.join('') + prefix + ' ' + (msg || '');
}
function consoleGroupPolyfill(label) {
global.nativeLoggingHook(groupFormat(GROUP_OPEN, label), LOG_LEVELS.info);
groupStack.push(GROUP_PAD);
}
function consoleGroupEndPolyfill() {
groupStack.pop();
global.nativeLoggingHook(groupFormat(GROUP_CLOSE), LOG_LEVELS.info);
}
if (global.nativeLoggingHook) {
const originalConsole = global.console;
global.console = {
@@ -511,6 +535,8 @@ if (global.nativeLoggingHook) {
trace: getNativeLogFunction(LOG_LEVELS.trace),
debug: getNativeLogFunction(LOG_LEVELS.trace),
table: consoleTablePolyfill,
group: consoleGroupPolyfill,
groupEnd: consoleGroupEndPolyfill,
};
// If available, also call the original `console` method since that is