Is it possible to sync css file in phpstorm with chrome dev tools?

Question

Google Chrome

A little unclear question, but I did not figure out how to formulate it correctly.
I am making a gulp builder for layout, sass+postCss+browserSync. Everything seems to work, but there is one problem.
Let's say there is a div with the header-phone class in the site header.
Previously, I clicked on the desired element on the browser page, selected "View Code" and styled that element.
Now I need to see in chrome what class the desired element has, find it in a file in phpstorm and then prescribe styles, which is not very convenient.
I want this: I click on the desired element in the browser, click "View Code", in phpstorm in the style.scss file scrolls to the styles of this element.
Is it possible to do this? Or am I digging in the wrong direction?

Answer 1

Set Up Persistence with DevTools Workspaces

Answer 2

$(document).ready(function() {
    var windowHeight = $(window).height();
    $(document).on('scroll', function() {
        $('.myMouse, .go3, .go4, .go5, .go6, .go7, .go8, .gofooter').each(function() {
            var self = $(this),
                height = self.offset().top + self.height();
            if ($(document).scrollTop() + windowHeight >= height) {
                $('#box2, #box3, #box4, #box5, #box6, #box7, #box8, footer, .line_again').show()
            }
        });
    });
});

And very briefly:

$(document).ready(function(){var o=$(window).height();$(document).on("scroll",function(){$(".myMouse, .go3, .go4, .go5, .go6, .go7, .go8, .gofooter").each(function(){var n=$(this),t=n.offset().top+n.height();$(document).scrollTop()+o>=t&&$("#box2, #box3, #box4, #box5, #box6, #box7, #box8, footer, .line_again").show()})})});

Answer 3

You can use UglifyJS, but it seems to me that this code needs to be made not shorter, but more understandable: at least indent.