fix(connection): separate send/receive debug logging (#6017)

This PR splits the logging for send and receive messages in to separate debug channels.
This way it is easier to filter and takes advantage of debug's automated coloring to make
it easier to visually parse on the command line

src/Connection.ts

@@ -16,7 +16,8 @@
 import { assert } from './helper';
 import { Events } from './Events';
 import * as debug from 'debug';
-const debugProtocol = debug('puppeteer:protocol');
+const debugProtocolSend = debug('puppeteer:protocol:SEND ►');
+const debugProtocolReceive = debug('puppeteer:protocol:RECV ◀');
 
 import Protocol from './protocol';
 import { ConnectionTransport } from './ConnectionTransport';
@@ -78,14 +79,14 @@ export class Connection extends EventEmitter {
   _rawSend(message: {}): number {
     const id = ++this._lastId;
     message = JSON.stringify(Object.assign({}, message, { id }));
-    debugProtocol('SEND ► ' + message);
+    debugProtocolSend(message);
     this._transport.send(message);
     return id;
   }
 
   async _onMessage(message: string): Promise<void> {
     if (this._delay) await new Promise((f) => setTimeout(f, this._delay));
-    debugProtocol('◀ RECV ' + message);
+    debugProtocolReceive(message);
     const object = JSON.parse(message);
     if (object.method === 'Target.attachedToTarget') {
       const sessionId = object.params.sessionId;