xvrh / puppeteer-dart

A Dart library to automate the Chrome browser over the DevTools Protocol. This is a port of the Puppeteer API
BSD 3-Clause "New" or "Revised" License
236 stars 59 forks source link

why opening devtools on the bottom instead of side? #236

Closed zsbox closed 7 months ago

zsbox commented 1 year ago

image

Is there a flag we can use to tell Chrome to open DevTools on the bottom of the page?

I looked through the issues and don't see a related question, thanks, sorry if it's a dumb question but was hard to find an answer with Google.

xvrh commented 1 year ago

I've had some success by creating a "user data directory" with a Preferences file. And putting some preferences like currentDockState: bottom.

Like that:

import 'dart:convert';
import 'dart:io';
import 'package:path/path.dart' as p;
import 'package:puppeteer/puppeteer.dart';

void main() async {
  var dir = Directory.systemTemp.createTempSync('user_pref');
  var userDataDir = _createUserDataDirectory(dir, preferences: {
    'devtools': {
      'preferences': {
        'currentDockState': jsonEncode('bottom'),
      }
    }
  });
  var browser = await puppeteer.launch(
      devTools: true, headless: false, userDataDir: userDataDir.path);

  await Future.delayed(const Duration(seconds: 10)); // Do the job

  await browser.close();
  dir.deleteSync(recursive: true);
}

Directory _createUserDataDirectory(Directory dir,
    {Map<String, dynamic>? preferences}) {
  var defaultDir = Directory(p.join(dir.path, 'Default'))
    ..createSync(recursive: true);
  if (preferences != null) {
    File(p.join(defaultDir.path, 'Preferences'))
        .writeAsStringSync(jsonEncode(preferences));
  }
  return dir;
}

Let me know if it helps.

zsbox commented 1 year ago

@xvrh thank you so much you are an angel