Devtools Mapping to network resources suddenly broken

Question

I've been using Chrome's (latest stable build v49) devtools and Serverpress for years to develop local Wordpress sites. I haven't had an issue adding theme folders to workspaces then mapping CSS files to the network resource so I can make persistent changes until yesterday, when I started a new project and the mapping stopped working. I can see in the workspaces settings that the mapping is set up properly, but it simply doesn't make the connection--in the elements panel rather than edit the local file, it has me editing style.css?v=4.4.2. I'm going crazy, I've tried clearing out all other workspaces folders and mappings, reinstalled chrome, racked my brain for recent changes I've made to any settings that might have caused this, and searched high and low for others with the issue but no luck.

Another thing I've noticed is that when I attempt to map the local file to the system resource, the correct stylesheet I want to map appears in the list. But when I attempt to map the 'remote' stylesheet to the local file, the list of options is blank.

Any help would be amazing,

Answer 1

I have noticed this issue as well. Its a fix that the Chrome team is aware of and is trying to fix. From what I understand, basically it was a complete coincidence that it even worked in the first place because the code wasn't written to accommodate files with parameters. Check out the Chrome Dev Forum here.

Chrome Dev Forum Persistence Topic

Until then, if you are using Wordpress and you really want this feature to work, replace the version number in your wp_enqueue_style with null like so:

From This

wp_enqueue_style ( 'customstyle', get_template_directory_uri () . '/css/custom.css', false, '1.0', 'all' );

To This

wp_enqueue_style ( 'customstyle', get_template_directory_uri () . '/css/custom.css', false, null, 'all' );

That should solve your issue, at least until the DevTools team works it out.

Answer 2

Well, it's absurd and a hack, but for anyone else who may come across this issue, I was able to fix it by adding a hook that strips the stylesheet version.

function remove_cssjs_ver( $src ) { if( strpos( $src, '?ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 ); add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );