Is there a way (maybe shortcut) to select any element using keyboard after entering chrome inspector?

Lets say i use the shortcut “Ctrl + Shift + I” to enter chrome inspector, is there a way to immediately after that select the first (or any) element in the inspector with keyboard.

Running JavaScript with ‘require’ from developers Console on Chrome

Is there an easy way to execute a javascript on Chrome browser when the JS require several files,

ex. to run the unit test of https://github.com/cryptocoinjs/bs58 or https://github.com/kronolynx/pgp-word-list-converter on my browser directly from chromebook is that doable?

Browser plugin to capture drag and drop events

I want to write a chrome extension. Whenever user drag and drop a file/image to the browser, It need to capture the file path. I think this is possible with java script but not sure how to write a code to capture drag and drop a file as an chrome extension.
Can you give me hints or a way to do it ?

How to stop all JS scripts in Puppeteer

I would like to be able to stop any scripts from being able to run in puppeteer after the page has loaded. The reason for this is to stop carousel images and lazy loading images and essentially get the page to behave as statically as possible to enable screenshots where the images aren’t changing etc.

By doing page.evaluate('debugger;') it is possible to pause the whole script, but this does not let you continue with taking screen shots as the a evaluate function does not exit until you exit the debugger (If the gui is enabled)

How to Handle Layout Thrashing Across Functions?

In our web application, we have click action to render full page content. It contain 4 widgets.

Each widget is rendered by separate JavaScript method and each JavaScript method has its own set of read and write.

We grouped read and write at function level, but Layout thrashing is not avoidable in this case.

How to handle Layout Thrashing across functions?

Cannot set breakpoints at some lines in Chrome devTools source panel

This happens recently in my Chrome’s source panel. It used to work just fine. Not sure if that’s causing by the recent update of Chrome (I’m currently using 68.0.3440.106 (Official Build) (64-bit) on macOS High Sierra 10.13.6)

enter image description here

As you can see in the screenshot, these are all the locations that I can set breakpoints in this file. It used to be working at least for line 6-10 but now I can only set for line 8.

Anyone who is experiencing this?

(chrome extension) can’t select file from file input at popup.html unless DevTools is opened

i have a very strange situation at chrome extension. the popup.html page contains a file input element, but when click it the file browser opens but selecting a file doesn’t have any effect (eg: “change” event not fired and file name doesn’t appear at file input element).

but when i do right click on extension icon and select “inspect popup” and try again to choose a file, surprisingly, file input element works and “change” event fired.

the following are extension files. load the extension and click extension icon to see file input element. clicking file input will show file browser but won’t choose a file.
right click on extension icon and choose “inspect popup” to open popup window. now input element works just by opening “inspect popup” window.
of course you need to visit “https://developer.chrome.com” because of pageurl restrict at background.js

using jquery has no effect.

manifest.json

{
"name": "hello world",
"version": "1.0",
"description": "hello world",
"permissions": ["activeTab", "declarativeContent"],
"background": {
  "scripts": ["background.js"]
},
"page_action": {
  "default_popup": "popup.html"
},
"manifest_version": 2

}

background.js

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {

  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [new chrome.declarativeContent.PageStateMatcher({
      pageUrl: {
          hostEquals: 'developer.chrome.com',
      }
    })
    ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
  }]);

});

popup.html






    
    
    

popup.js

document.getElementById('file-input').onchange = function(ev){
    document.querySelector('.debug').appendChild(document.createTextNode("change event fired"));
};

What could Idle time mean?

We have an apples to apples setup, but one server is noticeably slower. If I profile a web page in chrome developer tools under the Performance tab, both servers return nearly identical values for loading, scripting, rendering, painting and other, but idle is 2X as much.

I have searched a bunch and a lot of folks say that idle means that the user isn’t interacting, but that is not my case. I am using the “Start Profiling and reload page” option. which just records for the length of the page load.

What could Idle mean in this case? How can I debug it further?

How to debug Protractor e2e tests with ndb?

I have recently discovered the magic of debugging Node applications with ndb. (You should really check it out, if you’ve never seen it.)
For our non-e2e integration tests (which use jasmine) I was easily able to debug the test code simply by substituting ndb for node.

ndb node_modules/jasmine/bin/jasmine.js --config=jasmine.json

When I do the same for protractor, the debugger comes up, but the tests don’t begin. For example, the following fails:

ndb node_modules/protractor/bin/protractor protractor.conf.ts --suite smoke

Any clues? (I have a suspicion that it has to do with the Typescript transpilation that happens, but I have no evidence hard evidence.)

Access website socket frame information through chrome extension

I need to access socket frame information in my chrome extension. Chrome extension is only for personal purpose. so i dont need to worry about the security regarding the chrome extension published to chrome store.

I don’t know whether its possible to access socket info through chrome?

IS there any possible way to get socket info from the website thought chrome extension, chrome app.